vue3移动端实现pdf预览 |
您所在的位置：网站首页 › 移动端pdf预览插件 › vue3移动端实现pdf预览 |
vue3移动端实现pdf预览
|
第一种方式：使用vue-pdf-embed和vue3-pdfjs
使用的插件有： npm i vue-pdf-embed npm i vue3-pdfjshtml部分： js部分： // 引入两个插件相关的 import VuePdfEmbed from 'vue-pdf-embed'; import { createLoadingTask } from 'vue3-pdfjs'; // 以上涉及的参数 const pdfState = reactive({ source: '', // 预览pdf文件地址 pageNum: 1, // 当前页面 scale: 1, // 缩放比例 numPages: 0, // 总页数 width: '400px', // 宽度 }); const preRef = ref(); const detail = ref({});//返回的数据 const loading = ref(true); const loadError = ref(false); // 方法 // 接口返回的数据 function getDetail() { baseInfoGet({ id: route.currentRoute.value.query.id }).then((res) => { detail.value = res.data; const url = safeJSONParse(res.data.fileUrl)?.[0].url || ''; pdfState.source = url; console.log('预览地址：', url); if (!url) return; setTimeout(() => { pdfState.width = getComputedStyle(preRef.value)?.width; console.log(pdfState.width); loadingPdf(url); }, 0.5 * 1000); }); } // 加载pdf的方法 function loadingPdf(url) { const loadingTask = createLoadingTask(url); loadingTask.promise.then((pdf) => { pdfState.numPages = pdf.numPages; loading.value = false; }).catch(() => { loading.value = false; loadError.value = true; }); }我一开始使用的时第一种方法，然后测试之后发现苹果手机会显示pdf加载出错了 ，安卓手机可以正常显示，于是换成了第二种方法。
html部分： js部分： // 引入插件相关的参数 import * as pdfjs from 'pdfjs-dist'; import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'; pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker; // html部分涉及的参数 const loadError = ref(false); const detail = ref({}); let pdfDoc = null; // 一定不能使用响应式的数据，会报错Cannot read from private field---pdf.js const pageNum = ref(0); // 处理接口返回的pdf的url function getDetail() { baseInfoGet({ id: route.currentRoute.value.query.id }).then((res) => { detail.value = res.data; const url = safeJSONParse(res.data.fileUrl)?.[0].url || ''; showLoadingToast({ message: '加载中...', forbidClick: true, }); console.log('预览地址：', url); if (!url) return; loadingPdf(url); }); } //加载pdf function loadingPdf(url) { const loadingTask = pdfjs.getDocument(url); loadingTask.promise .then((pdf) => { pdfDoc = pdf; pageNum.value = pdf.numPages; nextTick(() => { renderPage(); }); }) .catch(() => { closeToast(); loadError.value = true; }); } // 渲染pdf function renderPage(num = 1) { pdfDoc.getPage(num).then((page) => { const canvas = document.getElementById(`pdf-canvas-${num}`); const ctx = canvas.getContext('2d'); const scale = 1.5; const viewport = page.getViewport({ scale }); // 画布大小,默认值是width:300px,height:150px canvas.height = viewport.height; canvas.width = viewport.width; // 画布的dom大小, 设置移动端,宽度设置铺满整个屏幕 const { clientWidth } = document.body; // 减去2rem使用因为我的页面左右加了padding canvas.style.width = `calc(${clientWidth}px - 2rem)`; // 根据pdf每页的宽高比例设置canvas的高度 canvas.style.height = `${ clientWidth * (viewport.height / viewport.width) }px`; canvas.height = viewport.height; canvas.width = viewport.width; page.render({ canvasContext: ctx, viewport, }); if (num < pageNum.value) { renderPage(num + 1); } else { closeToast(); } }); }用了第二种插件后，苹果手机还是加载不出来，后面查到因为pdfjs-dist有时候会出现部分手机比如iphone6和iphone8渲染不出pdf问题 解决办法： 将pdfjs-dist版本改为2.2.228 npm i [email protected]然后就加载出来了，最后在各个环境测试的时候又发现，微信小程序里面打开这个模块，pdf还是没加载出来，console之后发现请求401，报错信息是登陆访问超时，发现pdfjs加载pdf时没有携带token 遂，在加载url时添加token即可 pdfjs加载pdf时携带token //加载pdf function loadingPdf(url) { const afterUrl = { url, httpHeaders: { token: `Bearer-${localStorage.getItem('token')}`, }, }; const loadingTask = pdfjs.getDocument(afterUrl ); loadingTask.promise .then((pdf) => { pdfDoc = pdf; pageNum.value = pdf.numPages; nextTick(() => { renderPage(); }); }) .catch(() => { closeToast(); loadError.value = true; }); }添加之后就加载出来了 |
【本文地址】