文件后缀名、文件类型、mimeType值对应关系表

函数封装

为 此，将 工 作 中 常 用 的 公 共 方 法 封 装 整 理 了 一 份（不定时更新）点击此处查看

  这里可以将这些公共方法全部写在一个 publicMethods.js 文件中，然后在 main.js 文件中引入，并抛给 vue 原型，然后这样的好处就是，不管在哪个 vue 文件中，都能通过 this.xxx.xxx 的方式调用封装的公共方法；

• publicMethods.js

// 创建一个a标签，并做点击下载事件
function downloadFile(hrefUrl, fileName){
    let a = document.createElement('a')
    a.href = hrefUrl
    a.download = fileName // 下载后文件名
    document.body.appendChild(a)
    a.click() // 点击下载
    document.body.removeChild(a) // 下载完成移除元素
}
// 封装blob对象
function dataURLToBlob(base64Str, mimeTypeStr) {
    let bstr = window.atob(base64Str); // 解码 base-64 编码的字符串，base-64 编码使用方法是 btoa()
    let length = bstr.length;
    let u8arr = new Uint8Array(length); // 创建初始化为0的，包含length个元素的无符号整型数组
    while (length--) {
        u8arr[length] = bstr.charCodeAt(length); // 返回在指定的位置的字符的 Unicode 编码
    }
    return new Blob([u8arr], { type: mimeTypeStr }); // 返回一个blob对象
}

// 后端返回base64公共导出
function downloadFileByBase64(base64Str, mimeTypeStr, fileName){
    let myBlob = dataURLToBlob(base64Str, mimeTypeStr)
    let myUrl = window.URL.createObjectURL(myBlob)
    downloadFile(myUrl, fileName)
}
// 后端返回文件流公共导出
function downloadFileByFileFlow(blobData, mimeTypeStr, fileName) {
    let blob = new Blob([blobData], { type: mimeTypeStr })
    let hrefUrl = window.URL.createObjectURL(blob) // 创建下载的链接
    downloadFile(hrefUrl, fileName);
}

• main.js

import publicMethod from './utils/publicMethods.js';
Vue.prototype.$public = publicMethod;

• 相应的vue文件中

// res为后端返回的base64字符串
this.$public.downloadFileByBase64(res, 'application/vnd.ms-excel', '订单明细');

// res为后端返回的文件流
this.$public.downloadFileByFileFlow(res, 'application/vnd.ms-excel', '订单明细');

  如有不足，望大家多多指点！ 谢谢！