vue实现Word或Excel文档导出的功能，转换文件名乱码或者json格式

一、导出word

文件名乱码，使用 JavaScript 对其进行编码
解决方案：使用 escape 函数对其编码，之后再根据需求使用 decodeURI 或者 decodeURIComponent 对其解码

也是找了好久的解决乱码的方法，参考自https://blog.csdn.net/weixin_34290000/article/details/91478275

例子

image.png

解码

image.png

代码（页面直接调用，文章末尾加入公用方法）

this.$axios.get(ExportOrganScale,{params:db}, {responseType: `blob` })
                .then(res => {
                  console.log(res)
                    //  word文档为msword,pdf文档为pdf，msexcel 为excel(目前get请求只测试了word下载)
                    let blob = new Blob([res.data], {type: `application/msword`});
                    let objectUrl = URL.createObjectURL(blob);
                    let link = document.createElement("a");
                    const fileName = res.headers["content-disposition"].match(/filename=(\S*).doc/)[1];
                    let formatString = escape(fileName)
                    let fname=decodeURI(formatString)+'.doc'
                    link.href = objectUrl;
                    link.setAttribute("download", fname);
                    document.body.appendChild(link);
                    link.click();                 
                });

二、导出Excel（此处写了公共方法）

1、在components中建立文件common.js，用于存放导出Excel的公共方法derivesXLS
备注：communalApi是分类（名字可随意修改），用于包含所有的公用方法
2、在main.js中引入公共js

import common from "./components/common"
Vue.prototype.common = common

3、编写导出公用方法：options接收传递参数（参数及接口）

import axios from 'axios'
export default {
 communalApi:{
   derivesXLS(options) { //导出 xls
            axios.post(options.url, options.db, {
                    responseType: "arraybuffer"
                })
                .then(
                    res => {
                        if(res.headers["content-disposition"]==undefined){ //没有文件
                            var enc = new TextDecoder('utf-8')
                            var txt = JSON.parse(enc.decode(new Uint8Array(res.data)))
                            if(txt.code==0){
                                this.$message.error(txt.msg);
                                return;
                            }
                        }
                        let blob = new Blob([res.data], {
                            type: "application/vnd.ms-excel"
                        });
                        const fileName = res.headers[
                            "content-disposition"
                        ].match(/filename=(\S*).xls/)[1];
                        const elink = document.createElement("a");
                        elink.download = JSON.parse(fileName) + ".xls";
                        elink.href = window.URL.createObjectURL(blob);
                        elink.click();
                        window.URL.revokeObjectURL(elink.href);
                    },
                    err => {}
                );
        },
 }
}

4、页面使用

var db={}//请求参数
 this.common.communalApi.derivesXLS({
              url: '接口名称',
              db: db
            });

三、导出Word公用方法

方法

 derivesDoc(options) {//导出word
            axios.get(options.url, {params:options.db}, {
                responseType: "arraybuffer"
            })
            .then(
                res => {
                    //  word文档为msword,pdf文档为pdf，msexcel 为excel(目前get请求只测试了word下载)
                    let blob = new Blob([res.data], {type: `application/msword`});
                    let objectUrl = URL.createObjectURL(blob);
                    let link = document.createElement("a");
                    const fileName = res.headers["content-disposition"].match(/filename=(\S*).doc/)[1];
                    let formatString = escape(fileName)
                    let fname=decodeURI(formatString)+'.doc'
                    link.href = objectUrl;
                    link.setAttribute("download", fname);
                    document.body.appendChild(link);
                    link.click(); 
                },
                err => {}
            );
        },

页面使用同导出Excel页面公用方法调用一致

4、结语：今天是努力填坑的一天，fignting！！！

image.png