pdfjs ios预览会跳很多下

转载

数据侠客行 2024-09-07 16:21:28

文章标签 pdfjs ios预览会跳很多下 vue.js html5 javascript html 文章分类 iOS 移动开发

如果你想光前端完成 office(xls,doc,ppt) 文件的预览,只能提供你这些库来使用

PDF http://mozilla.github.com/pdf.js/
XLS https://github.com/SheetJS/sheetjs
DOCX https://github.com/mwilliamson/mammoth.js (docx可以解析,doc 不行) 
PPT https://github.com/SheetJS/js-ppt

项目要求需要预览pdf文件，网上找了很久，大多数都是推荐pdf.js，自己先了解了一下，最后决定用pdf.js，

但是发现，在vue中使用这个很少！！！！！所以我就写这一篇帮助一下vue使用pdfjs的朋友！

其实这和前端框架无关的，直接使用pdf.js原生

搜多了你就发现有几个封装pdf.js的vue组件，个人试验了其中一个，效果不是很好，所以，当然啊，用原生

的是最好的啦！

首先肯定是导入插件，我是从官网直接下载，链接：点击打开链接，注意放在static文件目录下，

这里面有核心的pdf.js和pdf.worker.js,以及展示pdf的viewer页面把它作为静态资源来编译，基本想要的build和web这两个重要文件夹的东西都正常编译。当然你可以可以npm install一下，整个文件放在static目录下的不好地方就是打包会很大哟（当然你可以选择性的删除里面的文件，比如绝大部分语言包）。目录结构放一下

其实就可以直接用的，网上很多，viewer.js 里的

用file= 的方式也可以打开哟，放在页面上使用，我是a进行嵌套或者 ifram

<a href="/static/pdf/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf" target="_blank">看pdf</a>
    <a :href="'/static/pdf/web/viewer.html?file='+ pdfUrl"></a>
    
    <iframe src="/static/pdf/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf" frameborder="0" width="100%" height="800px"></iframe>
    <iframe :src="'/static/pdf/web/viewer.html?file='+ pdfUrl " frameborder="0" width="100%" height="800px"></iframe>

file参数中默认只允许传简单路径比如：http://www.a.com/file.php. 如果你要浏览的pdf路径为http://www.a.com/file.php?id=2001。这时候直接传入的话会解析出错，因为pdf.js无法判断id=2001是viewer.html的参数呢还是file.php的参数

这告诉我们 url必须进行encode编码把参数file后传入的动态参数中特殊字符转义：

这里又会有两种方法：

encodeURI() 把字符串编码为 URI
encodeURIComponent() 把字符串编码为 URI 组件

发现 encodeURI不会对:/?&等uri中起分割作用的字符进行编码；

encodeURIComponent则会。

所以必须选择 encodeURIComponent 进行对url的编码

pdfjs ios预览会跳很多下_pdfjs ios预览会跳很多下

后台返回文件流，前端实现预览pdf 后台返回文件流，前端实现预览pdf - 简书

pdfjs ios预览会跳很多下_pdfjs ios预览会跳很多下_02

document.getElementById('sourceFile').value = '' " //可以重复上传文件

//上传
<div class="upload">
        <input
          type="file"
          placeholder="选择文件"
          ref="avatarInput"
          @change="changeImage($event)"
          accept="application/msword, application/pdf" 
          multiple="multiplt"
        />
        <span>{{clickUpload}}</span>
      </div>
changeImage(e) {
      // 上传图片事件
      var files = this.$refs.avatarInput.files;
    //var files = e.target.files[0];
      var that = this;
      function readAndPreview(file) {
        //Make sure `file.name` matches our extensions criteria
        if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
          var reader = new FileReader();
          reader.onload = function (e) {
            // 防止重复上传
            if (that.imgDatas.indexOf(e.target.result) === -1) {
              that.imgDatas.push(e.target.result);
            }
          };
          reader.readAsDataURL(file);
        }
      }
      readAndPreview(files[0]);
      if (files.length === 0) {
        return;
      }
      // 文件上传服务器
      this.File = files[0];
      this.clickUpload = files[0].name;
      document.getElementById('sourceFile').value = '';
    },
let formData = new FormData();
        formData.append("File", this.File, this.File.name);

//获取
<iframe :src="this.pdfUrl" frameborder="0" width="100%" height="800px"></iframe>
// accept="application/msword, application/pdf"  限制上传文件类型
// accept="image/*" — 接受任何图片文件类型. 
data{ rerurn { pdfUrl:'' }}
//获取接口
axios({
            method: "get",
            url: "api/AuditContract/GetPDFContent",
            headers: {
              "Content-Type": "application/pdf",
            },
            params: {
              RandomCode: res.result,
            },
            responseType: "blob",
          })
            .then((response) => {
              console.log(response.data);//文件流
              this.pdfUrl = this.getObjectURL(response.data);
             //this.pdfUrl = window.URL.createObjectURL(response.data); 写这种就不需要下面的方法了(可以尝试一下)
            })
            .catch((error) => {
              console.log(error.data);
            });

getObjectURL(file) {
      // console.log(file,'file')
      let url = null;
      if (window.createObjectURL !== undefined) {
        // basic
        // url = window.createObjectURL(file)
        var binaryData = [];
        binaryData.push(file);
        url = window.URL.createObjectURL(
          new Blob(binaryData, { type: "application/pdf" })
        );
      } else if (window.webkitURL !== undefined) {
        // webkit or chrome
        try {
          // url = window.webkitURL.createObjectURL(file);
          var binaryData = [];
          binaryData.push(file);
          url = window.URL.createObjectURL(
            new Blob(binaryData, { type: "application/pdf" })
          );
        } catch (error) {
          console.log(error);
        }
      } else if (window.URL !== undefined) {
        // mozilla(firefox)
        try {
          // url = window.URL.createObjectURL(file);
          var binaryData = [];
          binaryData.push(file);
          url = window.URL.createObjectURL(
            new Blob(binaryData, { type: "application/pdf" })
          );
        } catch (error) {
          console.log(error);
        }
      }
      return url;
    },

这样如此就ok了

viewer.html 修改

整个顶部bar 隐藏
<div id="toolbarViewer" style="display:none"></div>

隐藏并且取消打印和下载按钮和事件 (pointer-events: none 使事件点击不生效)

<button id="print" class="toolbarButton print hiddenMediumView" title="Print" tabindex="33" style="display: none;pointer-events: none" data-l10n-id="print">
<span data-l10n-id="print_label">Print</span> </button>

<button id="download" class="toolbarButton download hiddenMediumView" title="Download"
style="display: none;pointer-events: none" tabindex="34" data-l10n-id="download">
 <span data-l10n-id="download_label">Download</span> </button>

pdf.js禁掉下载和打印的功能

<script>
    // 禁止ctrl + s
    document.addEventListener("keydown", function (e) {
      if (e.keyCode == 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
        e.preventDefault();
        e.stopPropagation();
      }
    }, false);
    // 禁止鼠标右击
    function stop() {
      return false;
    }
    document.oncontextmenu = stop;
    //屏蔽 F12
    function testKeyDown(event) {
      if (
        (event.keyCode == 123)) 
      {
        event.keyCode = 0;
        event.returnValue = false;
      }
    }
    document.onkeydown = function () { testKeyDown(event); }
    window.onhelp = function () { return false; }
  </script>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。