Vue 学习随笔系列二十 -- 文件下载

文件下载

一、前端插件下载

import XLSX from 'xlsx';
import XLSXS from "xlsx-style"
import FileSaver from 'file-saver'

export const export_json_to_excel = ({
  data,
  key,
  title,
  filename,
  autoWidth
}) => {
  const wb = XLSX.utils.book_new();
  data.unshift(title);
  const ws = XLSX.utils.json_to_sheet(data, {
    header: key,
    skipHeader: true
  });
  if (autoWidth) {
    const arr = json_to_array(key, data);
    auto_width(ws, arr);
  }
  XLSX.utils.book_append_sheet(wb, ws, filename);
  XLSX.writeFile(wb, filename + '.xlsx');
}

引入

	let titles = [
		{ title: "xxxxx", key: "xxxxx" },
        { title: "xxxxx", key: "xxxxx" },
        { title: "xxxxx", key: "xxxxx" },
        { title: "xxxxx", key: "xxxxx" },
        { title: "xxxxx", key: "xxxxx" },
        { title: "xxxxx", key: "xxxxx" },
	]
	const params = {
	  multiHeader: [multiHeader],
	  header: titles,
	  key: keys,
	  data: excelData,
	  merges: ["P1:S1", "T1:W1", "X1:AA1", "AB1:AE1"],
	  autoWidth: true,
	  filename: "签约转售中项目",
	};
	excel.export_json_to_excel_more_title(params);

二、后端下载

1、拿到文件地址进行下载

window.location.href = util.baseUrl + "api/download/" + 'xxxx文件名';
window.open(`url`);
saveAs('https://xxxxx/xxxx.xlsx')

2、后端返回二进制流下载

创建公共方法

// 文件下载并创建点击事项
export const downloadMethod = ({ content, fileName }) => {
  const blob = new Blob([content])
  if ('download' in document.createElement('a')) {
    const a = document.createElement('a')
    a.download = fileName
    a.style.display = 'none'
    a.href = URL.createObjectURL(blob)
    document.body.appendChild(a)
    a.click()
    URL.revokeObjectURL(a.href)
    document.body.removeChild(a)
    this.$message.success('导出成功')
  } else {
    navigator.msSaveBlob(blob, fileName)
    this.$message.success('导出成功')
  }
}

export const exportFunc = ({ url, params, fileName }) => {
  this.$message.info('正在导出，请稍等')
  const temp = qs.stringify(params, { indices: false })
  util.http({
    method: 'GET', url: `${url}?${temp}`, data: {}, responseType: 'blob'
  }).then(res => {
    console.log(111, res)
    const tempFileName = fileName || res?.headers?.['content-disposition']?.split(';fileName=')?.[1] || ''
    downloadMethod({ content: res.data, fileName: tempFileName })
  }).catch(errorData => {
    const reader = new FileReader();  //创建一个FileReader实例
    reader.readAsText(errorData, 'utf-8'); //读取文件,结果用字符串形式表示
    reader.onload = () => {//读取完成后,**获取reader.result**
      const result = JSON.parse(reader.result);
      this.$message.error(result.title || '导出失败，请重试')
    }
  })
}

在main.js中引入

// 公共方法所在文件路径
import { exportFunc } from "./api/xxxxx";
Vue.prototype.$exportFunc = exportFunc;

在页面中使用下载方法

exportExcel () {
      const flag = this.$refs.QueryBox.valid()
      if (!flag) return
      this.$exportFunc({
        url: '/api/xxxxx/xxxxx',
        params: this.getParams(),
        fileName: 'xxxxxx报表.xlsx'
      })
    },

3、使用 FileSaver 下载

引入 file-saver 插件

// 安装插件
npm install file-saver --save
// 在使用的页面引入
import FileSaver from "file-saver";

    async generateAndExport () {
      if (!this.tableData.length) {
        this.$message.warning("暂无数据生成并导出！");
        return;
      }
      this.loading = true;
      try {
      	let params = { id: this.row.id }
        let result = await exportData(params );
        const fileName = 'xxxxx.xlsx
        FileSaver.saveAs(result, fileName); 
      } finally {
        this.loading = false;
      }
    },

// 注意后端接口的封装 要添加 responseType: ‘blob’

export const exportData= (params) => {
    return new Promise((resolve, reject) => {
      request(`xxxxxx?Id=${params.id}`, 
      params, 'get', 
      { responseType: 'blob'})
      .then(res => {
            resolve(res)
        }).catch(err => {
            reject(err)
        })
    })
}