前端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文件名字,zi...
·
第一步:下载插件
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 = jsonData
let 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.list
const 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]))
}
更多推荐
已为社区贡献18条内容
所有评论(0)