一、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下载文件到本地集合相关推荐

Js下载文件到本地（兼容多浏览器）
在客户端通过js下载文件,试过几种下载方式,iframe方式仅限于IE浏览器,window.open(url),location.href=url 这两种方式在chrome浏览器还会是直接打开文件而不 ...
使用JS自动从服务器端下载文件到本地
1.文件下载页面用来显示要下载的文件数量和大小,以及总文件大小.数据展示这里就不贴了,就贴后面需要用到的三个弹出层吧:遮罩层.文件下载提示框.下载完成弹出框.  & ...
两种 js下载文件的方法(转)
2019独角兽企业重金招聘Python工程师标准>>> 两种 js下载文件的方法(转) functionDownURL(strRemoteURL, strLocalURL){try{ ...
火狐使用js下载文件_如何使用Firefox Send安全地将大文件发送给任何人
火狐使用js下载文件 We may be living in the future, but sending large files over the web remains-complicated. ...
微信小程序 - 下载文件到本地、打开文档
前言需求场景描述:接口获取到服务器的文件地址,然后在小程序中下载文件到本地手机上.根据文件格式,下载类型分为下面四种情况: 下载图片到本地下载视频到本地打开文档,支持格式:doc, xls, p ...
JS 下载文件两种方式总结
后端返回Blob对象(文件流),完成导出.下载功能: 1.介绍Blob Blob Blob 对象表示一个不可变.原始数据的类文件对象.它的数据可以按文本或二进制的格式进行读取,也可以转换成 Reada ...
小程序配置阿里云OSS下载文件，在请求头里配置生成强制下载链接，（拿到下载链接可以下载文件至本地）
小程序配置阿里云OSS下载文件,在请求头里配置生成强制下载链接,(拿到下载链接可以下载文件至本地)(Win10电脑开发环境)**这里只说明小程序端问题**<菜鸡总结大神勿喷!蟹蟹~> 大体 ...
xshell下载mysql到本地文件_在Xshell中上传下载文件到本地（linux中从多次ssh登录的dbserver里面的文件夹）-Go语言中文社区...
在Xshell中上传下载文件到本地(linux中从多次ssh登录的dbserver里面的文件夹) 1 列出所有需要copy的sh文件 -bash-4.1$ ll /mysqllog/osw/*.sh ...
【VMware】【XShell】从虚拟机下载文件到本地
XShell author:zoxiii XShell从虚拟机下载文件到本地 1.安装工具lrzsz 2.找到要下载的文件 3.开始下载 1.安装工具lrzsz # yum -y install lr ...

JS下载文件到本地集合

一、js下载后台返回的xlsx、docx、zip（返回格式：文件流）文件

1. 前言

2. code

二、js下载json文件

1.接口返回值

2.接口文件 api.js文件

3.页面文件 .vue

三、js下载为TXT文件格式

第一种

1.前言

2.代码

第二种

1.前言

2.安装

3. 页面操作

JS下载文件到本地集合相关推荐

最新文章

热门文章