[JavaScript知识库]vue导出word功能，excel，pdft同理 两种方式

vue导出word功能，excel，pdft同理 两种方式

									废话不多讲直接上代码

// Word文档导出
wordExport() {

第一种方式

  this.$notify.info({title: '文件导出', message: `正在导出${this.addData.title}台账请稍后`})
  let url =`djapp/meeting/exportDoc/${this.$route.query.id}?token=${window.sessionStorage.getItem('token')}`    // 拼接word导出地址,生产环境需要在meeting前加 '/',开发环境不用
  setTimeout(() => {
    window.open(url)
  }, 1500)

第二种方式

  this.$axios({
    method: "get",
    responseType: "blob", //这里如果不设置，下载会打不开文件 arraybuffer或者blob均可以
    url: `djapp/meeting/exportDoc/${this.$route.query.id}`,
    timeout: 10000
  }).then(res => {
   let fileName = '导出台账.docx';
    // 通过后台返回 的word文件流设置文件名并下载
    let blob = new Blob([res.data], {//[res.data],开发过程中要和后台沟通好，返回的文件流是在res中还是在res.data中。
      type: "applicationnd.openxmlformats-officedocument.wordprocessingml.document"//下面的格式也行
    }); //application/msword 这里表示doc类型
    if (window.navigator.msSaveOrOpenBlob) {// 兼容IE10
      navigator.msSaveBlob(blob, fileName);
    } else {
      let downloadElement = document.createElement("a");
      let href = window.URL.createObjectURL(blob); //创建下载的链接
      downloadElement.href = href;
      downloadElement.download = fileName; //下载后文件名
      document.body.appendChild(downloadElement);
      downloadElement.click(); //点击下载
      document.body.removeChild(downloadElement); //下载完成移除元素
      window.URL.revokeObjectURL(href); //释放掉blob对象
    }
  }).catch(err => {
    this.$notify.error({title: '导出失败', message: err})
    console.log(err);
  })

},

作者：阿濤，
欢迎来对以上功能的评论，
此外以上的整理内容有误的地方，欢迎在评论中指正，万分感谢。
如果你还有其它想吐槽的，也非常欢迎在评论中留下你的吐槽。
读完有帮助，不妨关注一下，点个赞支持一下。