vue实现word，pdf，xlsx文件下载

老虎吃大虫

已于 2022-11-25 11:44:59 修改

阅读量2.1k

点赞数 3

分类专栏： blob下载文章标签： vue.js javascript 前端

于 2022-03-02 12:07:45 首次发布

本文链接：https://blog.csdn.net/m0_60694785/article/details/123226504

版权

blob下载专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用axios在前端通过GET和POST请求从后端获取word、excel等文件数据，并转换为Blob对象进行下载。内容包括设置responseType为arraybuffer，创建Blob，利用URL.createObjectURL创建下载链接，以及xlsx库的使用方法，用于将数据转换为xlsx文件并下载。

摘要由CSDN通过智能技术生成

导出word文档、xlsx表格

// *一*
axios.get(`url`, { //url: 接口地址
    responseType: `arraybuffer` //一定要写
})
.then(res => {
    if(res.status == 200){
        const blob = new Blob([res.data], {
        type: `application/msword`, //word文档为msword,pdf文档为pdf，msexcel 为excel
      });
      const objectUrl = URL.createObjectURL(blob);
      const link = document.createElement('a');
      const fname = `测试.doc`; //下载文件的名字+后缀名
      link.href = objectUrl;
      link.setAttribute('download', fname);
      document.body.appendChild(link);
      link.click();

    })
  }
});

// *二*
axios.post(
    url
    data,
    {
        responseType: "blob",
    }
).then((res) => {
        const blob = new Blob([res.data], {  type: "application/x-excel" });
        const objectUrl = URL.createObjectURL(blob);
        const link = document.createElement("a");
        const fname = `数据表格.xlsx`; //下载文件的名字+后缀名
        link.href = objectUrl;
        link.setAttribute("download", fname);
        document.body.appendChild(link);
        link.click();
      });

后端返回的word数据格式（res.data）

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6ICB6JmO5ZCD5aSn6Jmr,size_20,color_FFFFFF,t_70,g_se,x_16

后端返回的pdf数据格式（res.data）

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6ICB6JmO5ZCD5aSn6Jmr,size_20,color_FFFFFF,t_70,g_se,x_16

前端导出xlsx文件

<el-button @click="buttonClick()">下载1</el-button>

// 安装依赖 npm install xlsx -S 
import XLSX from 'xlsx';

data(){
    return{
        //    表格
        xlsxData: [
        {
          姓名: '1',
          年龄: '',
          性别: '',
          住址: '',
          是否必填: '',
          备注: '',
        },
      ],
    }
}

methods: {
    buttonClicks() {
      const Title = this.xlsxData;
      const Cash = this.xlsxData; //表格
      const CashFlow = this.xlsxData; //表格
      const sheet1 = XLSX.utils.json_to_sheet(Title);
      const sheet2 = XLSX.utils.json_to_sheet(Cash);
      const sheet3 = XLSX.utils.json_to_sheet(CashFlow);
      const data = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(data, sheet1, '表1');
      XLSX.utils.book_append_sheet(data, sheet2, '表2');
      XLSX.utils.book_append_sheet(data, sheet3, '表3');
      const Blob = this.blobHandler(data);
      this.resultHandler(Blob, '模版.xlsx');
    },
    blobHandler(workbook) {
      // 生成excel的配置项
      const wopts = {
        // 要生成的文件类型
        bookType: 'xlsx',
        // // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
        bookSST: false,
        type: 'binary',
      };
      const wbout = XLSX.write(workbook, wopts);
      // 将字符串转ArrayBuffer
      function s2ab(s) {
        const buf = new ArrayBuffer(s.length);
        const view = new Uint8Array(buf);
        for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
        return buf;
      }
      const blob = new Blob([s2ab(wbout)], {
        type: 'application/octet-stream',
      });
      return blob;
    },
    resultHandler(blob, fileName) {
      if (typeof blob == 'object' && blob instanceof Blob) {
        blob = URL.createObjectURL(blob); // 创建blob地址
      }
      console.log("下载2",blob);
      const link = document.createElement('a');
      link.href = blob;
      // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，有时候 file///模式下不会生效
      link.download = fileName;
      let event;
      if (window.MouseEvent) event = new MouseEvent('click');
      link.dispatchEvent(event);
    },
}