导读:vue插件-前端导出Excel表格安装依赖2个依赖cnpminstall--savexlsxfile-saver组件里头引入importFileSaverfrom'fil..
vue插件-前端导出Excel表格
安装依赖2个依赖
cnpm install --save xlsx file-saver 组件里头引入import FileSaver from 'file-saver' import XLSX from 'xlsx'
组件methods里写一个方法
exportExcel () { /* generate workbook object from table */ var wb = XLSX.utils.table_to_book(document.querySelector('#out-table')) //表格的id /* get binary string as output */ var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' }) try {
FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
} catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) } return wbout
},
vue插件-前端批量打包导出文件(.zip)
安装依赖
npm install -S axios npm install -S jszip npm install -S file-saver 组件里头引入import JSZip from 'jszip'import fileSaver from 'file-saver'import axios from 'axios'
js中引入方法
export function getFile(url) { return request({
url: url,
method: 'get',
responseType: 'blob'
})
}
组件methods里写一个方法
handleBatchDownload() { const dataFile = this.ftypeList //数据源
const zip = new JSZip() const cache = {} const promises = []
dataFile.forEach(item => {const promise = getFile(item.url).then(data => { // 下载文件, 并存成ArrayBuffer对象 const arr_name = item.url.split('/') const file_name = item.typeName + arr_name[arr_name.length - 1] //文件名称 zip.file(file_name, data, { binary: true }) // 逐个添加文件 cache[file_name] = data
})
promises.push(promise)
})
Promise.all(promises).then(() => {
zip.generateAsync({ type: 'blob' }).then(content => { // 生成二进制流 FileSaver.saveAs(content, this.currentTime + '复工前准备事项.zip') // 利用file-saver保存文件 })
})
},
this.ftypeList格式图
smile
更多文章请关注《万象专栏》
转载请注明出处:https://www.wanxiangsucai.com/read/cv4738
话题推荐: #vue插件#