vue实现pdf预览的功能

最新推荐文章于 2024-07-25 09:35:22 发布

今天也需要努力搬砖呐

最新推荐文章于 2024-07-25 09:35:22 发布

阅读量251

点赞数

文章标签： vue.js pdf javascript

本文链接：https://blog.csdn.net/weixin_46262744/article/details/129793996

版权

#vue实现pdf预览的功能(流的方式）
在这里插入图片描述
** 1.pdf我没下载包 npm i pdf 这个**

首先写一个iframe标签

  <iframe
        :src="pdfUrl"
        frameBorder="no"
        width="100%"
        :loading="loading"
        height="100%"
      />
    import axios from "axios";  //引入axios

在data中声明

loading:false,
pdfUrl:''

调接口一定要注意 responsetype 是否生效了要告诉浏览器是pdf文件

  var that = this;
        axios.request({
            method: "POST",
            url: '后台地址',
            responseType: "blob", //这里最关键
          })
          .then((res) => {
            const fileReader = new FileReader();
            fileReader.onload = function () {
              var fun = () => {
                const blob = new Blob([res.data], { type: "application/pdf" }); //声明的形式
                that.$nextTick(() => {
                  that.pdfUrl = URL.createObjectURL(blob);
                });
              };
              fun();
            };fileReader.readAsText(res.data);
          })
          .catch((error) => {
            this.$message({
              type: "error",
              message: error,
            });
          })
          .finally(() => {
            this.loading = false;
          });