vue从服务器获取csv文件,vue2.x上传csv，读取某一列

1.安装依赖

yarn add file-saver

yarn add xlsx

yarn add script-loader --dev

或者npm安装

npm install -S file-saver xlsx(这里其实安装了2个依赖)

npm install -D script-loader

2.在src下新建excel

QQ截图20191206103748.png

Blob.js,Export2Excel.js下载地址：https://github.com/aipdx/vue-cli3-login/tree/master/src/excel

3.代码

+上传Excel文件

{{ CSVname }}

重新上传

export default {

name: "excel",

data() {

return {

againUpload:false,

loadingCSV:false,

CSVname:'',

taobaoLink:[]

}

},

methods: {

importExcel(event) {

let _this = this;

// 通过DOM取文件数据

let files = event.currentTarget.files[0];

var rABS = false; //是否将文件读取为二进制字符串

var f = files;

if (files.length == 0) return;

let fileType = files.name.substr(files.name.lastIndexOf(".")).toUpperCase();

let fileSize = files.size / 1024 / 1024 < 10;

if (fileType != ".CSV") {

this.$message.error('上传文件必须是csv格式!');/*需安装element-ui*/

return;

}

if(!fileSize){

this.$message.error('单次提交的csv文件不可大于10M，请将文件拆分多个分次提交!');

return;

}

this.loadingCSV = true

var reader = new FileReader();

FileReader.prototype.readAsBinaryString = function(f) {

var binary = "";

var rABS = false; //是否将文件读取为二进制字符串

var wb; //读取完成的数据

var outdata;

var reader = new FileReader();

reader.onload = function(e) {

var bytes = new Uint8Array(reader.result);

var length = bytes.byteLength;

for(var i = 0; i < length; i++) {

binary += String.fromCharCode(bytes[i]);

}

var XLSX = require('xlsx');

if(rABS) {

wb = XLSX.read(btoa(fixdata(binary)), { //手动转化

type: 'base64'

});

} else {

wb = XLSX.read(binary, {

type: 'binary'

});

}

outdata = XLSX.utils.sheet_to_csv(wb.Sheets[wb.SheetNames[0]]);//outdata就是读取excel内容之后输出的东西

console.log(wb.Sheets.Sheet1) /*读取表格内容*/

let taoBaoLink = ""

let taobaoLinkArray = [] /*每次重新上传都要清空*/

for(const i in wb.Sheets.Sheet1){

/*读出来的表格是一个对象 可根据索引来筛选出自己需要的*/

// console.log(wb.Sheets.Sheet1[i].w)

if(wb.Sheets.Sheet1[i].w == "数字ID"){ /* 这里的“数字ID”替换成自己想要的 */

var objName = i.slice(0,2)

}

if(i.slice(0,2) == objName){

if(typeof wb.Sheets.Sheet1[i].v == "number") {

taoBaoLink = "https://item.taobao.com/item.htm?id=" + wb.Sheets.Sheet1[i].v /*字符串拼接*/

taobaoLinkArray.push(taoBaoLink)

}

}

}

/*验证是否上传了正确的文件*/

if(taobaoLinkArray.length == 0) {

_this.$message.error('上传失败，请勿改动CSV文件或检查文件是否为空！');

_this.loadingCSV = false

return

}

this.taobaoLink = taobaoLinkArray

console.log(taobaoLinkArray) /*这个就是处理后需要的结果*/

_this.CSVname = files.name

// _this.$message.success('上传成功！');

_this.loadingCSV = false /*loading 文件太大可用*/

_this.againUpload = true

}

reader.readAsArrayBuffer(f);

}

if(rABS) {

reader.readAsArrayBuffer(f);

} else {

reader.readAsBinaryString(f);

}

},

}

}

.upload-csv{

width: 900px;

height: 61px;

background-color: #f7f7f7;

border: solid 1px #ececec;

padding-left: 16px;

}

.csv-btn{

width: 119px;

height: 24px;

border-radius: 2px;

border: solid 1px #409eff;

display: inline-block;

text-align: center;

line-height: 24px;

margin-top: 18px;

position: relative;

}

.csv-btn input{

width: 119px;

height: 24px;

position: absolute;

top: 0;

left: 0;

opacity: 0;

-ms-filter: 'alpha(opacity=0)';

font-size: 0px;

cursor: pointer;

}

.again-upload{

position: relative;

vertical-align: middle;

}

.again-upload input{

width: 80px;

height: 30px;

position: absolute;

top: 0;

left: 0;

opacity: 0;

-ms-filter: 'alpha(opacity=0)';

font-size: 0px;

cursor: pointer;

}