一、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)},

總結

以上是生活随笔為你收集整理的JS下载文件到本地集合的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。