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框架,其 ...
随机推荐
- List.Sort 排序用法收集
使用Lambda表达式,实现代码如下: private static void SortByLambda() { List<Article> list ...
- Apache Camel继承Spring Boot 实现文件远程复制和转移
pom.xml <dependency> <groupId>org.apache.camel</groupId> <artifactId>camel-f ...
- linux服务器配置防火墙使用端口
重启后生效方法: 1.开启: chkconfig iptables on 2.关闭: chkconfig iptables off 即时生效,重启后失效 : 1.开启: service iptabl ...
- iOS Method Swizzling和分类的妙用AppDelegate轻量化处理
http://www.cocoachina.com/ios/20151117/14167.html 简介 在iOS工程中,AppDelegate往往会有上千行,甚至几千行,这样就会给维护AppDele ...
- hackerrank---List Comprehensions
题目链接 刷刷Python基本功...列表解析 附上代码: x = int(input()) y = int(input()) z = int(input()) n = int(input()) pr ...
- SDUT-3361_迷宫探索
数据结构实验之图论四:迷宫探索 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 有一个地下迷宫,它的通道都是直的,而通道 ...
- SVN过滤设置 标签: svn 2015-07-29 17:39 953人阅读 评论(35) 收藏
为了方便管理我们的系统版本,很多人会用到SVN,开发中我们经常用到SVN插件, 但是对于某些文件的缓存来说, 我们只要有操作缓存便会保存一次, 每次提交很是麻烦, 可能有的文件或者文件夹我们并不想提交 ...
- Redis源码解析:06整数集合
整数集合(intset)是集合键的底层实现之一,当一个集合只包含整数值元素,并且这个集合的元素数量不多时,Redis就会使用整数集合作为集合键的底层实现. intset可以保存类型为int16_t,i ...
- 1月房地产企业销售TOP100出炉 万科重回第一
1月房地产企业销售TOP100出炉 万科重回第一 2017-02-05 07:40:32 来源:腾讯新闻 责任编辑: [摘要]TOP100房企1月的销售金额合计4311.8亿元,销售面积合计3648. ...
- vue-router2.0的用法
随着vue越来越火,而vue-router却是一个项目不可或缺的,所以在这里结合实例总结一下router的用法,也是给自己的一个总结. 1.首先第一步当然是安装vue-router依赖,当然也可直接s ...