700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > vue导出excel加一个进度条_运用vue导出excel碰到的那些坑

vue导出excel加一个进度条_运用vue导出excel碰到的那些坑

时间:2024-02-03 09:10:23

相关推荐

vue导出excel加一个进度条_运用vue导出excel碰到的那些坑

需求:

Vue+element UI el-table下的导出当前一切数据到一个excel文件里。

先根据网上的要领,看看有哪些坑

准备工作:

1、装置依靠:yarn add xlsx file-saver -S

2、在安排须要导出功用的组件中引入

import FileSaver from "file-saver";

import XLSX from "xlsx";

3、HTML中的设置,简朴来讲就是给须要导出的table标签el-table上加一个id:如outTable,对应下面的exportExcel要领中的 document.querySelector(‘#outTable‘)

//导出当前表格

exportCurrent:function(){

var wb = XLSX.utils.table_to_book(document.querySelector('#outTable')) //表格id

var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })

try {

FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheet.xlsx') //文件名

} catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }

return wbout

},

我们来看一下原始数据

接下来再来看一下导出的效果

哎???我定单编号跟银行卡号咋成了科学计数法了??

另有我的时候,时分秒呢??

缘由是因为数字太长了,须要运用excel的文本花样才显现一般

经由种种搜刮,终究处理要领以下:

exportExcel() {

var xlsxParam = { raw: true };//转换成excel时,运用原始的花样

var wb = XLSX.utils.table_to_book(document.querySelector("#outTable"),xlsxParam);

var wbout = XLSX.write(wb, {

bookType: "xlsx",

bookSST: true,

type: "array"

});

try {

FileSaver.saveAs(

new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),

"sheetjs.xlsx"

);

} catch (e) {

if (typeof console !== "undefined") console.log(e, wbout);

}

return wbout;

},

再来看我们的数据

功德圆满,假如处理了你的题目的话,能够帮我点个赞吗,谢谢了。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。