Bolb文件流的显示和下载

最近在做一些关于文件的下载和显示的工作。对于显示一般有两种方式，一种是前端拼接显示文字。另一种是后端返回Bolb文件流前端处理显示。首先第一种前端拼接显示就是设置特定的格式然后获取到变化的字段，将接口返回的值显示在变化的字段处。

//div样式
 <div class="contentBox contentBox1">
            <div ref="file">
            </div>
 </div>
 
 //css样式
 .contentBox1 {
    width: 55%;
    margin: 0 auto;
    overflow: auto;
    border-left: 2px solid #8aa4ab;
    background-color: #e5e5e5;
    display: block;

    .Title {
        height: 50px;
        font: bolder 32px 方正小标宋_GBK;
        text-align: center;
        margin-bottom: 40px;
    }

    .selfTitle {
        font: normal 22px 方正黑体_GBK;
        text-indent: 2em;
        margin: 10px 0;
    }

    .textParagraph1 {
        line-height: 42px;
        font-family: 方正仿宋_GBK;
        font-size: 22px;
    }

    #textStyle,
    .date {
        line-height: 42px;
        font-family: 方正仿宋_GBK;
        font-size: 22px;
    }

    .date {
        text-align: right;
        margin-bottom: 20px;
    }
}
 
 //JS处理逻辑
 let docx = require("docx-preview");
 //查询方法
   handleQuery() {
   axios({
                method: "get",
                responseType: "blob",
                url: '接口地址',
                params: {
                    //传参
                    //***:***
                      }
            }).then(({ data }) => {
              //返回结果
             docx.renderAsync(data,this.$refs.file);
            }).catch(err => {
                console.log(err);
            });
        },
 //导出方法   导出word的方式
        handleExport() {
            axios({
                method: "get",
                responseType: "blob",
                url: '接口地址
                params: {
                 //传参
                 //***:***
                }
            }).then(({ data }) => {
                const blob = new Blob([data]);//把得到的文件流对象转一下
                var a = document.createElement("a");//创建一个a标签
                a.href = URL.createObjectURL(blob);//将流文件写入a标签
                a.download = '***(文件名).docx' //导出文件的名字。
                a.style.display = "none" //将A 标签隐藏
                document.body.appendChild(a)//将a标签追加到文档对象中
                a.click()  //模拟点击A标签，会触发A标签的href的读取，浏览器就会自动下载
                a.remove() //一次性，用完就删除A标签
            })
        },
        
       //导出excel的方式
 handleExport() {
            axios({
                method: "get",
                responseType: "blob",
                url: '接口地址
                params: {
                 //传参
                 //***:***
                }
            }).then(({ data }) => {
                const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });//// 创建 Excel 格式的 Blob 对象
                var a = document.createElement("a");//创建一个a标签
                a.href = URL.createObjectURL(blob);//将流文件写入a标签
                a.download = '***(文件名).docx' //导出文件的名字。
                a.style.display = "none" //将A 标签隐藏
                document.body.appendChild(a)//将a标签追加到文档对象中
                a.click()  //模拟点击A标签，会触发A标签的href的读取，浏览器就会自动下载
                a.remove() //一次性，用完就删除A标签
            })
        },

word和excel的最大区别就是类型转换的时候 excel比word多了一个
{ type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }
以及导出的后缀 变化