1. 安裝依賴
npm install pdfh5?
2. pdfh5 預覽(移動端，h5)
npm install pdfh5 , （會報錯，需要其他依賴，不能直接用提示的語句直接npm下載，依舊會報錯，npm報錯：These dependencies were not found:* canvas in ./node_modules/pdfh5/js/pdf.js* dommatrix/dist/d ）
npm install canvas
?vue2 實例
- vue 文件中 創建div 節點
-
<template><div class="wrap"><div id="demo"></div></div> </template> - js 中配置
-
<script> import Pdfh5 from "pdfh5"; // 這兩個一定要引入 import "pdfh5/css/pdfh5.css"; // 這兩個一定要引入， 這個是在加載時，頂部會出來一個加載進度條和一些其他的樣式 export default {name: "openPdf",data() {return {pdfh5: null,};},mounted() {// ---------------------------- 方法一 -----------------------------this.pdfh5 = new Pdfh5("#demo", {pdfurl: "https://www.*********uanfu.pdf", // pdf 地址，請求的地址需要為線上的地址，測試的本地的地址是不可以的lazy: true, // 是否懶加載withCredentials: true,renderType: "svg",maxZoom: 3, //手勢縮放最大倍數 默認3scrollEnable: true, //是否允許pdf滾動zoomEnable: true, //是否允許pdf手勢縮放});// --------------------------- 方法二 ---------------------------//實例化this.pdfh5 = new Pdfh5("#demo", {pdfurl: "https://www**********anfu.pdf",});//監聽完成事件this.pdfh5.on("complete", function (status, msg, time) {console.log("狀態：" + status +"，信息：" +msg +"，耗時：" + time + "毫秒，總頁數：" + this.totalNum);});}, }; </script>本人親測用的方法二,方法一會控制臺報錯
-
Vue3 實例
-
import Pdfh5 from "pdfh5"; import "pdfh5/css/pdfh5.css";const refPdf = ref(null); const LoadPdf = (url) => {const pdfh5 = new Pdfh5(refPdf.value, {pdfurl: url,});pdfh5.on("complete", (status, msg, time) => { }); };const getDocById = (id) => {readPDF(id).then((res) => {if (res) {LoadPdf(window.URL.createObjectURL(new Blob([res])));}}); }
