vue+blob文件流下载导出world、excel、pdf文件

37 篇文章 0 订阅
1 篇文章 0 订阅
function exportMethod(data) {
  axios({
    method: 'get',
    url: 'https:xxx/xxx' + data.url,//接口地址
    params: data.data,//如果是post参数放到请求体data中
    responseType: 'blob',
    headers: {
      'Content-Type': 'application/json'
    }
  }).then((res) => {
    let type = "", type2 = []
    if (data.type == "doc") {
      type = 'application/msword'
      type2 = ['.doc', '.docx']
    } else if (data.type == "pdf") {
      type = 'application/pdf'
      type2 = ['.pdf']
    } else {
      type = 'application/vnd.ms-excel'
      type2 = ['.xls', '.xlsx']
    }
    const link = document.createElement('a')
    let blob = new Blob([res.data], { type })
    link.style.display = 'none'
    link.href = URL.createObjectURL(blob)
    link.download = data.fileName //自定义文件名
    link.type = type2
    document.body.appendChild(link)//下载创建a
    link.click()
    document.body.removeChild(link)//下载完删除a
  }).catch(error => {
    console.log(error)
  })
}

使用

   onClick_seeContract() {
   //点击下载事件
      let data = {
        url: "接口地址",
        data: { 参数},
        type: "doc",//文件类型
        fileName: "嘻嘻",//文件名
      };
      exportMethod(data);
    },
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue下载Word文件并添加字段,你可以使用以下步骤: 1. 在Vue项目中安装`docxtemplater`库,该库可用于操作Word文档。使用以下命令进行安装: ``` npm install docxtemplater --save ``` 2. 创建一个下载Word文件的方法。在该方法中,你需要先下载Word模板文件,然后通过`docxtemplater`库加载并操作该文件。 ```javascript // 在Vue组件中定义下载Word文件的方法 downloadWordFile() { // 下载Word模板文件 axios.get('path/to/word/template.docx', { responseType: 'arraybuffer' }) .then(response => { const template = response.data; // 加载Word模板文件 const doc = new window.docxtemplater(template); // 设置字段的值 const data = { field1: 'Value 1', field2:对应的值 }; // 将字段的值应用到Word模板中 doc.setData(data); doc.render(); // 将生成的Word文档转换为字节数组其他字段及其 const output = doc.getZip().generate({ type: 'arraybuffer' }); // 创建一个新的Blob对象,用于保存生成的Word文档 const blob = new Blob([output], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' }); // 创建一个下载链接,并将生成的Word文档链接到该链接上 const url = window.URL.createObjectURL(blob); // 创建一个隐藏的<a>标签,并设置下载链接和文件名 const link = document.createElement('a'); link.href = url; link.download = 'output.docx'; // 模拟点击下载链接 link.click(); // 释放URL对象 window.URL.revokeObjectURL(url); }) .catch(error => { console.error('Error:', error); }); } ``` 3. 在Vue组件中调用该方法,例如在按钮的点击事件中: ```html <template> <button @click="downloadWordFile">下载Word文件</button> </template> <script> export default { methods: { downloadWordFile() { // 调用下载Word文件的方法 // ... } } } </script> ``` 在上述代码中,你需要根据你的实际需求修改模板文件的路径和字段的值。另外,确保在Vue组件中引入了`axios`库,用于发送HTTP请求。 这样,当用户点击按钮时,Vue组件将下载并生成带有字段的Word文件

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值