vue 将数据生成为txt、execl并下载

原创已于 2024-12-19 15:47:28 修改 · 642 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端

于 2024-12-19 15:47:10 首次发布

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
    }