vue以文件流格式下载word

vue 以文件流格式下载word

使用方式

接口

export const busiBorrowOrder = () => {
  return request({
    url: 'xxxxxxxxxxxx',
    method: 'get',
    responseType: 'blob'  // Blob 对象,表示二进制数据
  })
}

使用

busiBorrowOrder().then(res => {
        const { data } = res;
        const blob = new Blob([data]);
        let disposition = decodeURI(res.headers["content-disposition"]);
        // 从响应头中获取文件名称
        let fileName = disposition.substring(
          disposition.indexOf("fileName=") + 9,
          disposition.length
        );
        if ("download" in document.createElement("a")) {
          // 非IE下载
          const elink = document.createElement("a");
          elink.download = fileName;
          elink.style.display = "none";
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName);
        }
      });
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中预览和下载docx文件,可以使用第三方JavaScript库,如`docx.js`或`mammoth.js`,然后将其集成到Vue组件中。下面是一个基本的Vue组件示例: ``` <template> <div> <div v-html="html"></div> <button @click="downloadDocx">下载</button> </div> </template> <script> import axios from 'axios'; import { Document } from 'docx'; export default { data() { return { html: '' }; }, mounted() { axios.get('example.docx', { responseType: 'arraybuffer' }) .then(response => { const doc = new Document(response.data); this.html = doc.getHTML(); }) .catch(error => console.log(error)); }, methods: { downloadDocx() { axios.get('example.docx', { responseType: 'arraybuffer' }) .then(response => { const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' }); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = 'example.docx'; link.click(); }) .catch(error => console.log(error)); } } }; </script> ``` 这个示例中,我们使用`axios`库从服务器加载docx文件,然后使用`docx.js`库将其转换为HTML格式,并在Vue组件中显示。我们还添加了一个下载按钮,当用户点击该按钮时,会将docx文件下载到本地。你需要将`example.docx`替换为你自己的docx文件路径。 需要注意的是,这些库可能不支持所有的docx文件格式,因此在使用之前最好先测试一下。此外,还应该考虑到docx文件较大时,加载和转换过程可能会比较耗时,因此最好添加一些进度提示,以提高用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值