1、txt类型文件
业务需求：希望将服务器存储的注册码通过点击下载按钮的形式导出txt文件并下载下来
具体思路为：先创建一个Blob实例并且将数据存入文件中，然后通过创建超链接触发下载使得文件直接下载到本地
function downTxt(data) {// 创建一个Blob实例，类型为纯文本const blob = new Blob([data], { type: 'text/plain;charset=utf-8' })// 创建一个指向该Blob的URLconst 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}