下載pdfjs
官網：http://mozilla.github.io/pdf.js/getting_started/#download

放入項目中
將下載下來的文件解壓縮后，重命名為pdf，將里面的pdf文件夾拷貝到項目中的public文件夾中

頁面中使用

<template><div class="container"><iframe :src="pSrc" class="child-container"></iframe></div> </template><script> export default {name: "pdf",data() {return {// pdf文件預覽完整路徑pSrc: '',};},methods: {//在線預覽pdf文件方法onlinePreviewPDF() {//1. 組裝在線預覽完整路徑，一般由后端獲取//baseurl ：pdf存放的文件路徑，可以是本地的，也可以是遠程，這個是遠程的，親測可以用let baseurl = 'http://localhost:8080/22.pdf';//2. 解決ie有緩存 及決方案：加個隨機數解決 + '?r=' + new Date()let pSrc = baseurl + '?r=' + new Date();//3.文件路徑編碼+調用pdfjs實現在線預覽pdf文件this.pSrc = '/pdf/web/viewer.html?file=' + encodeURIComponent(pSrc);},},//生命周期函數mounted: function () {this.onlinePreviewPDF();} }; </script><style>.child-container {width: 100%;height: 500px; } </style>

預覽效果
本地靜態文件

總結

以上是生活随笔為你收集整理的vue pdfjs 在线预览的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。