vue+blob，文件流转word文档并实现下载功能

2024年5月9日 210次阅读 来源: shmily...

1、HTML中

<ul style="list-style: none;" ref="LDQZOne">
    <li v-for="(item,index) in form.ldqz">
        <el-button type="primary" @click="downloadDom(item)">下载附件</el-button>
    </li>
</ul>

2、要想在方法downloadDom()中成功操作dom，就需要在data里定义好要新建的元素

data() {
      return {
        elink:document.createElement('a'),
       },

3、方法里的写法要注意两点，一是务必要在发送请求时，规定responseType:‘blob’；二是在new blob（）时务必也要规定下载文件的MIME 类型 {type: ‘application/msword’}，msword为word ，其余类型可参考(http://www.w3school.com.cn/media/media_mimeref.asp)

downloadDom(document) {         
 //我是先在另一个接口拿到了文件名之后，再按后台的要求将文件名作为下载接口的参数，
 //大家按自己的需求写就行了，要是没有文件名，可以在下面自定义
        this.$http      //大家按自己的写法发请求
          .get("接口地址", {
            params: {
           	   url: document,   //文件名作为参数，后台要求的
             //参数按后台要求的上传就行
            },
            responseType:'blob'      //重点重点，，位置要写对，
           // 我刚开始没写在跟params同级，导致下载下来的数据就是乱码
          }).then(res => {
            let content = res.data;
            const blob = new Blob([content], {type: 'application/msword'});     //重点重点，，，
           
            //application/msword类型要规定对，自己下载的是什么类型就写对应的类型
            
            const fileName = document;      //这个为文件名，可以自定义
            if ('download' in this.elink) { // 非IE下载
              this.elink.download = fileName;
              this.elink.style.display = 'none';
              this.elink.href = URL.createObjectURL(blob);
              this.$refs.LDQZOne.appendChild(this.elink);
              this.elink.click();     //触发点击事件，实现文档下载
              URL.revokeObjectURL(this.elink.href); // 释放URL 对象
              this.$refs.LDQZOne.removeChild(this.elink);    //下载完成，移除新建的a标签
            } else { // IE10+下载
              navigator.msSaveBlob(blob, fileName)
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
    原文作者：shmily...
    原文地址: https://blog.csdn.net/weixin_43842567/article/details/93498267
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞