前端vue导出Zip文件

第一步：下载插件

npm install jszip /npm install script-loader / npm install file-saver

第二步：封装js代码

require('script-loader!file-saver');import JSZip from 'jszip'//th是头部标题，jsonData是数据，txtName是txt文件名字，zipName是压缩包的名字export function export_txt_to_zip(th, jsonData, txtName, zipName) {const zip = new JSZip()const txt_name = txtName || 'file'const zip_name = zipName || 'file'const data = jsonDatalet txtData = `${th}\r\n`data.forEach((row) => {let tempStr = ''tempStr = row.toString()txtData += `${tempStr}\r\n`})zip.file(`${txt_name}.txt`, txtData)zip.generateAsync({type: "blob"}).then((blob) => {saveAs(blob, `${zip_name}.zip`)}, (err) => {alert('导出失败')})}

第三部：调用js进行生成压缩包进行下载

//触发事件进项调用handleDownload() {import('@/vendor/Export2Zip').then(zip => {const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']const list = this.listconst data = this.formatJson(filterVal, list)zip.export_txt_to_zip(tHeader, data, this.filename, this.filename)})},formatJson(filterVal, jsonData) {return jsonData.map(v => filterVal.map(j => v[j]))}