vue内使用pdf.js

最新推荐文章于 2024-08-14 08:39:40 发布

源码给你自己改

最新推荐文章于 2024-08-14 08:39:40 发布

阅读量874

点赞数

分类专栏： vue踩坑记录文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_43766460/article/details/116788444

版权

vue踩坑记录专栏收录该内容

3 篇文章 0 订阅

订阅专栏

主要是记录一下踩的坑，使用还是非常简单的。

首先是去官网下载pdf.js，可以采用install模式，不过直接下载有例子可以参考，我就采取的直接下载，官网地址http://mozilla.github.io/pdf.js/getting_started/#download

万万没想到我在这里遇到了我最大的一个坑，整整纠结了我一上午

下载的时候我没有选择下载（for old browsers）这个版本，而是下载了左边的版本

由于下错了版本，导致语法不兼容在iframe打开pdf文件时没法解析，于是就算路径没有问题也一直是打开的项目首页，也就是‘#/’这个路径......真的很无语。

然后使用，下载过后解压缩，我是vue2.0的版本，我给文件夹改名了pdfjs，然后把整个文件夹放到static下面，像这个样子

引入就算完成了，项目中使用也很简单，页面DOM结构

<div style="height: calc(100% - 35px)">
  <iframe
     id="printIframe"
     frameborder="0"
     :src="'/static/pdfjs/web/viewer.html?file=' + previewUrl"
     style="width: 100%; height: 100%"
  >
  </iframe>
</div>

js部分：

XMLHttpRequest那部分是因为返回的服务器端pdf地址会有跨域问题，把文件变成文件流形式再次转成URL就不会有跨域问题了。

我的URL是后台返回的，就在返回方法里赋值啦

    onlinePreview(item) {
      this.previewLoading = true; // 打开加载样式
      this.previewVisible = true; // 打开显示弹窗
      var Data = [{ FMName: "FJ_ZaiXianYuLan", DataID: item.DID }];
      let _this = this;
      this.socketApi.sendSock(Data, (result) => {
        var fileInfo = JSON.parse(result)[0];
        var x = new XMLHttpRequest(); // 跨域问题的解决
        x.open("GET", fileInfo.URL, true);
        x.responseType = "blob";
        x.onload = function (e) {
          //会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
          _this.previewUrl = window.URL.createObjectURL(x.response);
        };
        x.send();
        this.previewLoading = false; // 关闭等待样式
      });
    },

最后的预览就是很正常的样子了，最大的坑居然是下载错了，再次感叹自己真够呆的......会发现还是因为去网上下了个demo发现demo可以运行，哭了