【vue前端生成word文档】----生成word文档的第三步

最新推荐文章于 2024-09-15 19:18:08 发布

猫饭_ACE

最新推荐文章于 2024-09-15 19:18:08 发布

阅读量1.8k

点赞数

分类专栏： PDF 文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/m0_46459413/article/details/125664803

版权

前端开发 Word文档 Blob对象数据转换文件下载

关键词由CSDN通过智能技术生成

PDF 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

生成word文档的第一步和第二步

生成word文档的第一步:link
生成word文档的第二步:link

1. 页面按钮引用

<div style="display:inline-block;margin-left:10px">
    <el-button type="primary" @click="downWord()" style="margin-bottom:10px">
        Word下载
    </el-button>
 </div>

页面展示：
在这里插入图片描述

2. 前端方法

downWord() {
      let page = 1;
      let rows = 50;
      //调用的后端方法
      downloadWord({ tyshxydm: this.tyshxydm, pxbid: this.pxbid, page: page, rows: rows }).then((res) => {
        console.log("出参", res.data);
        this.downloadFileByBase64(res.data.map.base64, "application/msword", "研修培训项目实施方案");
      });
    },
    downloadFileByBase64(base64Str, mimeTypeStr, fileName) {
      let myBlob = this.dataURLToBlob(base64Str, mimeTypeStr);
      let myUrl = window.URL.createObjectURL(myBlob);
      this.downloadFile(myUrl, fileName);
    },
    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对象
    },
    downloadFile(hrefUrl, fileName) {
      let a = document.createElement("a");
      a.href = hrefUrl;
      a.download = fileName; // 下载后文件名
      document.body.appendChild(a);
      a.click(); // 点击下载
      document.body.removeChild(a); // 下载完成移除元素
    }