前端如何实现导出功能 vue

前端如何实现导出功能呢？

1.使用插件实现导出功能（FileSaver.js）

插件的地址：https://github.com/eligrey/FileSaver.js

插件的安装：

npm install file-saver --save
bower install file-saver

示例：

//使用 require 保存文本
var FileSaver = require('file-saver');
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");
//保存文本
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
saveAs(blob, "hello world.txt");
//标准 W3C 文件 API Blob 接口不兼容所有浏览器。
//Blob.js 是一个跨浏览器的 Blob 实现，可以解决兼容性问题。

//保存画布（canvas）
var canvas = document.getElementById("my-canvas"), ctx = canvas.getContext("2d");
// draw to canvas...
canvas.toBlob(function(blob) {
    saveAs(blob, "pretty image.png");
});

参数及其语法

FileSaver saveAs(Blob/File data, optional DOMString filename, optional Boolean disableAutoBOM)

# 插件的封装
创建一个exportFile.js文件

import FileSaver from 'file-saver'
export default class fileSave {
  /**
     * 导出Excel文件
     * @param {*} res   文件流
     * @param {*} name  文件名
     */
  static getWord (res, name) {
    const blob = new Blob([res], {
      type: 'application/msword;charset=utf-8'
    })
    FileSaver.saveAs(blob, name + '.docx')
  }

  /**
     * 导出Excel文件
     * @param {*} res   文件流
     * @param {*} name  文件名
     */
  static getZip (res, name) {
    const blob = new Blob([res], {
      type: 'application/zip;charset=utf-8'
    })
    FileSaver.saveAs(blob, name + '.zip')
  }
  //........可以根据自己的需要继续拓展
}

# 插件引用
在对应的页面文件中引入

import fileSave from '@/lib/exportFile.js'

具体使用：

 exportSummaryTable () {
      this.request.exportSummaryTable({ ...this.searchFilter }).then(res => {
        console.log(res)
        const name = res.headers['content-disposition'] ? decodeURIComponent(res.headers['content-disposition'].split('filename=')[1]) : '未命名'
        //判断请求头携带参数是否有题目，若有则可以下载文档
        //题目为header携带需要转码，若没有则提示错误信息
        //在我们将respondType设置为Blob时，我们得到的返回信息都为Blob类型
        //因此要判断是否返回成功，若返回文档失败则要将Blob设置为json格式：如下
        const reader = new FileReader()
        //读取数据完成时触发
        reader.onload = function () {
          const newData = JSON.parse(reader.result) // 此处的msg就是后端返回的msg内容
          if (newData.code == 102) {
            Message.error(newData.message)//element组件
          }
        }
        
        if (res.headers['content-disposition']) {
          fileSave.getWord(res.data, name)
        } else {
          reader.readAsText(res.data)
        }
      })
    },

2.使用a标签进行下载

 exportLoginLogList(this.tableParams).then(res => {
        let link = document.createElement('a')
        link.href = window.URL.createObjectURL(
          new Blob([res], {
            type: 'application/x-xls'
          })
        )
        link.target = '_blank'
        const name = res.headers['content-disposition']
          ? decodeURIComponent(res.headers['content-disposition'].split('filename=')[1])
          : '未命名'
        link.download = decodeURI(name)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      })
    },