pdf文件流,下载正常,但是预览全是空白页

pdf文件流,下载正常,但是预览全是空白页

遇到问题: 后加粗样式端返回pdf文件流能下载成功,页数也是正常的,打开也是正常的。但是直接在网页上预览,页数正常但页面都是空白的。如图:
在这里插入图片描述
问题代码如下:

        let data = JSON.stringify({ url: row.fileUrl });
        wordToPdf(data).then((res) => { //wordToPdf为封装的axios请求,res为后端返回的文件流
          let pdfFile = window.URL.createObjectURL(
            new Blob([res], {
              type: "application/pdf;charset=utf-8",
            })
          );
          window.open(pdfFile);
        });

解决办法: 需要添加请求类型responseType: 'blob',所以不用封装的axios,使用原生的axios。这样就能正常预览了。代码如下:

const baseURL = process.env.VUE_APP_BASE_API;
import axios from "axios";
        let data = JSON.stringify({ url: row.fileUrl });
        axios({
          method: "POST",
          url: baseURL + `/system/report/file/onlinePreview`,
          data: data,
          responseType: "blob", // 必须更改responseType类型为 blob
        })
          .then((res) => {
            console.log(res);
            let pdfFile = new Blob([res.data], {
              type: "application/pdf;charset=utf-8",
            });
            let url = window.URL.createObjectURL(pdfFile);
            window.open(url);
          })
          .catch((err) => {
            console.log(err);
          });

预览正常了
在这里插入图片描述

下载方法(自用)

/** 下载按钮操作 */
    handleDownload(row) {
      fetch(row.fileUrl)
        .then((res) => res.blob())
        .then((blob) => {
          const a = document.createElement("a");
          const objectUrl = window.URL.createObjectURL(blob);
          a.download = row.fileName;
          a.href = objectUrl;
          a.click();
        });
    },
  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值