vue项目文档流显示，下载为表格

最新推荐文章于 2024-07-23 19:11:17 发布

前端小小白~

最新推荐文章于 2024-07-23 19:11:17 发布

阅读量400

点赞数

分类专栏：前端开发文章标签： vue

本文链接：https://blog.csdn.net/DevelopmentW/article/details/105836638

版权

前端开发专栏收录该内容

20 篇文章 1 订阅

订阅专栏

vue项目文档流显示，下载为表格

二维码显示

首先看一下拿过来的文档流样式
在这里插入图片描述
后台返回值就是一张图，但是前端img 需要的是url地址所以我们还需要把它转成url

  <img :src="QRcodeUrl " alt="">

        // 获取二维码
        getQRcode() {
          this.$ajax({
            method: 'post',
            url: '/getQRcode',
            data: {
              id: this.id,
              width: '200',
              height: '200',
          },
            responseType: 'blob',   //  重点
          }).then(res => {
          //  res.data是返回的文档流
            const blob = new Blob([res.data]);
            const url = window.URL.createObjectURL(blob);
            this.QRcodeUrl = url;
          })
        },

文档流下载为表格

首先看一下拿过来的文档流样式
在这里插入图片描述
下载方法如下：

 //下载方法
 //blob(后台返回的文档流)；fileName（文件名称，注：添加后缀名）
      downloadFile(blob, fileName) {
        if (navigator.msSaveBlob) {
          navigator.msSaveBlob(blob, fileName);
        } else {
          let url = window.URL.createObjectURL(new Blob([blob]));
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", fileName);
          document.body.appendChild(link);
          link.click();
          link.remove();
        }
      },
// 使用：this.downloadFile(blob, '下载文件.xlsx');