vue项目导入excel单列导入
先安装 xlsx.js, 然后引入
import XLSX from 'xlsx';
代码
<form>
<span>
<textarea name="content" v-model="content" placeholder="please fill in the sentence"></textarea>
</span>
<span class="upimg"><img :src="img"><input type="file" class="file" name="file" @change="getFile($event)"></span>
<button @click="submitForm($event)">submit</button>
</form>
import XLSX from 'xlsx';
export default{
name: 'ssadd',
data(){
return {
content: '',
file: '',
img: '../src/assets/images/Upload-picture.png'
}
},
methods: {
//导入excel获取到内容
getFile(event){
//wb 存储读取完成的数据
//jsondata 存储获取excel json数据
var wb,jsondata,that=this;
var f = event.target.files[];
var reader = new FileReader();
reader.onload = function(e){
var data = e.target.result;
wb = XLSX.read(data, {type: "binary"});
jsondata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[]]);
// 将获取到的数据逐条连接入that.content中
for(var i=;i<jsondata.length;i++){
if(that.content==""){
that.content = jsondata[i].sentence;
}else{
that.content += ("<br/>" + jsondata[i].sentence);
} }
console.log(that.content);
}
reader.readAsBinaryString(f);
},
submitForm(event){
event.preventDefault(); let params = new URLSearchParams(); params.append('content', this.content); this.axios.post('url', params).then((ret)=>{
if(ret.status === ){
console.log(ret);
this.$router.push(ret.data.requireUrl);
}
})
}
},
mounted(){ }
后端接收并添加到数据库
代码
<?php
require '../config/config.php';
$conn = Connect(); $patterns = array('\'', '"');
$replacements = array('&apos', '"'); $data = str_replace($patterns, $replacements, $_POST['content']);
$arr = explode("<br/>", $data); $sql = "INSERT INTO ssentence (content) VALUES (?)"; $stmt = mysqli_stmt_init($conn); if(mysqli_stmt_prepare($stmt, $sql)){
mysqli_stmt_bind_param($stmt, 's', $content);
// 注 此处's'如只给一个字段插入就只写一个s,插入几个字段的数据就写几个 for($i=;$i<count($arr);$i++){
$content = $arr[$i];
mysqli_stmt_execute($stmt);
} $arr=[
"status"=>,
"message"=>"add data success",
"requireUrl"=>"/sslist"
];
echo json_encode($arr);
}else{
echo "创建数据表错误:" . $conn->error;
} $conn->close();
?>
vue项目导入excel单列导入的更多相关文章
- 基于vue项目的组件中导入mui框架初始化滑动等效果时需移除严格模式的问题
基于vue项目的组件中导入mui框架初始化滑动等效果时,控制台报错:Uncaught TypeError: 'caller', 'callee', and 'arguments' properties ...
- vue项目导出EXCEL功能
因为一些原因导出EXCEL功能必须前端来做,所以就研究了一下,在网上也找了一些文章来看,有一些不完整,我做完了就记录下来,供大家参考: 1.首先先安装依赖: npm install file-save ...
- Vue项目实现excel导出
1.package.json里面安装三个插件 npm install xlsx --save npm install script-loader –save-dev npm install ...
- C#语言-NPOI.dll导入Excel功能的实现
前言:刚工作那会,公司有一套完善的MVC框架体系,每当有导入EXCEL功能要实现的时候,都会借用框架里自带的导入方法,一般三下五除二就完成了,快是快,可总是稀里糊涂的,心里很没有底.前几天,在另一个原 ...
- DevExpress XtraGrid 数据导出导入Excel
// <summary> /// 导出按钮 /// </summary> /// <param name="sender"></param ...
- SQLServer导入Excel,复杂操作
导入Excel 先导入的时候报错了, 提示未在本地计算机上注册"Microsoft.ACE.Oledb.12.0"提供程序.(System.Data),去网址下个软件安装就搞定了, ...
- vue项目使用js-xlsx进行excel表格的导入和导出方法的简单原型封装
前提:已经安装好 file-saver xlsx和 script-loader,如未安装,请查看 https://www.cnblogs.com/luyuefeng/p/8031597.html 新建 ...
- Vue项目中导入excel文件读取成js数组
1. 安装组件 cnpm install xlsx --save 2. 代码 <template> <span> <input class="input-fil ...
- vue入坑教程(二)在vue项目中如何导入element以及sass
在项目中导入element以及sass.stylus等方便开发的工具以及UI框架 (1)如何在vue项目中导入elementUI框架 elementUI是饿了么团队开发出来基于vue的前端UI框架,其 ...
随机推荐
- 【Leetcode Top-K问题 BFPRT】第三大的数(414)
题目 给定一个非空数组,返回此数组中第三大的数.如果不存在,则返回数组中最大的数.要求算法时间复杂度必须是O(n). 示例 1: 输入: [3, 2, 1] 输出: 1 解释: 第三大的数是 1. 示 ...
- Spring → 01:概述
一.了解Spring发展 Spring是一个开源框架,Spring是于2003年兴起的一个轻量级的Java开发框架,由Rod Johnson在其著作Expert One-On-One J2EE Dev ...
- 【Java-加密算法】对称加密、非对称加密、单向散列(转)
一提到加密,就会联想到数字签名,这两个经常被混淆的概念到底是什么呢? 加密:加密是一种以密码方式发送信息的方法.只有拥有正确密钥的人才能解开这个信息的密码.对于其他人来说,这个信息看起来就像是一系列随 ...
- 解决VS+Qt不生成moc文件问题
使用VS的Qt插件进行Qt开发时,有时候会遇到不能生成moc文件的问题. 1.在工程中可以看到这个Generated files目录下是有一个看似moc文件的文件,双击打开的话: 如果能正常打开,文件 ...
- keystone同步数据库的时候提示error
keystone 在同步的时候报出以下错误: su -s /bin/sh -c "keystone-manage db_sync" keystone CRITICAL keysto ...
- weixin 微信开放平台 微信公众平台
官网地址入口 微信小程序 https://mp.weixin.qq.com/ appid and openid not match 1.appid :是公众号的ID. 2.openid:关注公众号生成 ...
- .net 数据表格显示控件
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/chenjinge7/article/details/30470609 1. GridView 控件 ...
- Arthas用法
简介 Arthas 是Alibaba开源的Java诊断工具,深受开发者喜爱. 当你遇到以下类似问题而束手无策时,Arthas可以帮助你解决: 这个类从哪个 jar 包加载的? 为什么会报各种类相关的 ...
- OpenCV 新手教程 之环境配置 + 图片匹配 matchTemplate
1.什么是OpenCV OpenCV的全称是:Open Source Computer Vision Library. OpenCV是一个基于(开源)发行的跨平台计算机视觉库,能够执行在Linux.W ...
- @atcoder - CODE FESTIVAL 2017 Final - J@ Tree MST
目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定 N 个点,第 i 点有一个点权 Xi,再给定一棵边带权的树 ...