JS下载文件到本地集合

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