1、txt类型文件
业务需求:希望将服务器存储的注册码通过点击下载按钮的形式导出txt文件并下载下来
具体思路为:先创建一个Blob实例并且将数据存入文件中,然后通过创建超链接触发下载使得文件直接下载到本地
function downTxt(data) {
// 创建一个Blob实例,类型为纯文本
const blob = new Blob([data], { type: 'text/plain;charset=utf-8' })
// 创建一个指向该Blob的URL
const path= URL.createObjectURL(blob)
// 创建一个超链接
const aLink= document.createElement('a')
aLink.href = path;
aLink.setAttribute('download', '注册码.txt')
document.body.appendChild(aLink)
// 触发下载
aLink.click()
// 清理
document.body.removeChild(aLink);
URL.revokeObjectURL(path);
}
2、execl类型文件
业务需求:希望把页面上的table渲染的数据导出为execl并下载至本地
具体思路:先引入xlsx、file-saver的依赖,创建Blob实例完成文件的下载
main.js
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
Vue.prototype.$FileSaver = FileSaver
Vue.prototype.$XLSX = XLSX
function exportToExcel() {
let tables = document.getElementById('exceltable')
let tableBook = this.$XLlizSX.utils.table_to_book(tables)
var tableWrite = this.$XLSX.write(tableBook, {
bookType: 'xlsx',
bookSST: true,
type: 'array'
})
try {
this.$FileSaver.saveAs(
new Blob([tableWrite], { type: 'application/octet-stream' }),
'列表.xlsx'
)
} catch (e) {
if (typeof console !== 'undefined') console.log(e, tableWrite)
}
return tableWrite
}