文件下载

---

一、前端插件下载

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 = fileNamea.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) returnthis.$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.xlsxFileSaver.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)})})
}