一、js下载后台返回的xlsx、docx、zip(返回格式:文件流)文件
1. 前言
vue项目中后台返回文件流前端需要下载指定文件格式
2. code
2.1 接口文件 api.js
export default {
downloadFile: {
url: "/uocr/downloadFile",
method: "post",
responseType: "blob"
},
};
2.2 config.js 自定义配置文件
FILE_TYPE_MAP: {
ZIP: "application/zip",
XLSX: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
DOC: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
},
2.3 工具函数文件 utils.js
/**
* 保存文件
* @param {*} blob
* @param {*} filename
*/
export function uploadFile(blob, filename) {
const a = document.createElement("a");
let href;
if (typeof blob === "string") {
href = blob;
} else {
a.download = filename;
href = URL.createObjectURL(blob);
}
a.href = href;
a.click();
URL.revokeObjectURL(href);
}
2.4 页面使用 .vue文件
<script>
import { uploadFile } from "@/utils/tools";
</script>
methods: {
// 下载docx文件
downloadPdf() {
const filename = new Date().valueOf();
// 接口调用
request(api.downloadFile, {fileName: this.resultPdfName}).then(res => {
// 返回值 { res }
uploadFile(
new Blob([res.data], { type: window.config.FILE_TYPE_MAP.DOC }),
filename
);
}).catch(err => {
console.log(err);
}).finally(() => {
// 接口调用结束
});
}
}
二、js下载json文件
1.接口返回值
{
"keyword": [
{
"name": "图加船坞",
"value": 144
},
{
"name": "毛泽东",
"value": 138
},
{
"name": "北纬",
"value": 82
},
{
"name": "东经",
"value": 82
},
{
"name": "活动",
"value": 55
},
{
"name": "区域",
"value": 46
},
{
"name": "海区",
"value": 46
},
{
"name": "位置",
"value": 46
},
{
"name": "关岛",
"value": 46
}
],
}
2.接口文件 api.js文件
// 下载结果
//window.config.PROJECT_NAME 公共端口号
export async function apiTextResultDown (data) {
return request({
url: `${window.config.PROJECT_NAME}/analyze/text/result/down`,
method: "post",
data
});
}
3.页面文件 .vue
<script>
import { apiTextResultDown } from "@/api/api.js";
</script>
// 下载结果
textResultDown() {
const newDate = moment(new Date).format("YYYY-MM-DD");
const filename= `TextAnalyzeResult_${newDate}.json`;
const params = {
num: this.numValue,
text: this.value
}
apiTextResultDown(params).then(res => {
this.exportRaw(res, filename);
}).catch(() => {
this.$message.error('下载失败,请稍后再试');
})
},
exportRaw(data, filename) {
if (typeof data === 'object') {
data = JSON.stringify(data, undefined, 4)
}
const export_blob = new Blob([data], {type: 'text/json'});
const save_link = document.createElement("a");
save_link.href = window.URL.createObjectURL(export_blob);
save_link.dataset.downloadurl = ['text/json', save_link.download, save_link.href].join(':')
save_link.download = filename;
this.fakeClick(save_link);
},
fakeClick(obj) {
const ev = document.createEvent("MouseEvents");
ev.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
obj.dispatchEvent(ev);
},
三、js下载为TXT文件格式
第一种
1.前言
2.代码
saveFile() {
var data = "文本内容"
var name = 'result.txt';
this.exportRaw(data, name);
},
exportRaw(data, name) {
var urlObject = window.URL || window.webkitURL || window;
var export_blob = new Blob([data]);
var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
save_link.href = urlObject.createObjectURL(export_blob);
save_link.download = name; save_link.click();
},
第二种
1.前言
2.安装
npm install --save file-saver
3. 页面操作
3.1 页面使用 .vue
<script>
import FileSaver from 'file-saver'
</script>
saveFile() {
let data = document.getElementsByClassName('contentresult')[0].innerText
let name = new Date().valueOf() + '.txt';
this.exportRaw(data, name);
},
exportRaw(data, name) {
data = data.replace(/\n/g, '\r\n') // 将\n进行替换成\r\n,txt类型无法将\n进行换行,查看\n可用JSON.stringfy
let blob = new Blob([data], {type: 'text/plain;chartset=utf-8'})
FileSaver.saveAs(blob, name)
},