[Vue front-end generates word documents]----The third step to generate word documents

The first and second steps to generate a word document

1. The first step to generate a word document: link
2. The second step to generate a word document: link

1. Page button reference

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

Page display:

2. Front-end methods

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); // 下载完成移除元素
    }