实现 Nuxt3 预览PDF文件
- 安装必要的库，这里使用PDF.js库
npm install pdfjs-dist --save - 为了解决跨域问题，在server/api 下 创建一个请求api， downloadFileByProxy.ts
import { defineEventHandler } from 'h3';export default defineEventHandler(async event => {const { filePath } = getQuery(event);let matches = filePath?.match(/^https?\:\/\/([^\/?#]+)(?:[\/?#]|$)/i);let domain = matches && matches[1]; return proxyRequest(event,`https://${domain}/`, {fetch: ()=>fetch(filePath),}) }) - 支持现代浏览器，新建pdfPreviewForMordern.vue组件
<script setup lang="ts">import { isPdf } from '~/utils/is';import 'pdfjs-dist/web/pdf_viewer.css';import * as pdfjsLib from 'pdfjs-dist';// import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf.js'; // 旧版浏览器需要换成这个导入import * as pdfjsViewer from 'pdfjs-dist/web/pdf_viewer';import 'pdfjs-dist/build/pdf.worker.entry';import * as pdfjsSandbox from 'pdfjs-dist/build/pdf.sandbox.js';// import { PDFDocumentProxy } from 'pdfjs-dist/types/src/display/api';import { debounce } from 'lodash-es';const props = defineProps({path: {type: String,default: '',},preview: {type: Boolean,default: true,},});const SANDBOX_BUNDLE_SRC = pdfjsSandbox;pdfjsLib.GlobalWorkerOptions.workerSrc = window.pdfjsWorker;const CMAP_URL = '/pdfjs-dist/cmaps/';const CMAP_PACKED = true;const STANDARD_FONT_DATA_URL = '/pdfjs-dist/standard_fonts/';window.pdfjsLib = pdfjsLib;window.pdfjsViewer = pdfjsViewer;const pdfEventBus = new pdfjsViewer.EventBus();const pdfScriptingManager = new pdfjsViewer.PDFScriptingManager({eventBus: pdfEventBus,sandboxBundleSrc: SANDBOX_BUNDLE_SRC,});const pdfLinkService = new pdfjsViewer.PDFLinkService({eventBus: pdfEventBus,});// (Optionally) enable find controller.const pdfFindController = new pdfjsViewer.PDFFindController({eventBus: pdfEventBus,linkService: pdfLinkService,});let pdfViewer: pdfjsViewer.PDFViewer | null = null;let pdfDocument: PDFDocumentProxy | null = null;const loading = ref<boolean>(true);const visible = ref<boolean>(false);const setVisible = (value: boolean): void => {if (!props.preview) {return;}visible.value = value;};let oldPath = '';const random = ref(Math.floor(Math.random() * 10001));const bufferCache = ref(null); // 使用缓存避免多次请求，可以试具体情况优化与否watch(() => props.path,async (val) => {if (!val || !isPdf(val)) {return;}setTimeout(() => {debounceRenderHandle();}, 500);},{immediate: true,},);const debounceRenderHandle = debounce(() => {initPage(props.path, `pdfjs-container-${random.value}`, 'page-height');}, 500);const preview = async () => {setVisible(true);if (oldPath === props.path) {return;}if (!props.path) {return;}oldPath = props.path;setTimeout(() => {initPage(props.path, `pdfjs-modal-container-${random.value}`);}, 500);};async function getFile(pdfPath: string) {// 为了防止跨域需要再次请求const { _data } = await $fetch.raw(`/api/downloadFileByProxy`,{method: 'get',params: {// filePath: val.split('/').pop(),filePath: pdfPath,},})let blob = _data;let buffer = await blob?.arrayBuffer();return buffer;}async function initPage(pdfPath: string, domId: string, zoom?: string | number) {if (!pdfPath) return;try {// download pdf from api to prevent CORSbufferCache.value = bufferCache.value || (await getFile(pdfPath));let container = document.getElementById(domId);pdfDocument = await pdfjsLib.getDocument({// url: pdfUrl as unknown as URL,data: useCloneDeep(bufferCache.value),cMapUrl: CMAP_URL,cMapPacked: CMAP_PACKED,standardFontDataUrl: STANDARD_FONT_DATA_URL,}).promise;pdfViewer = new pdfjsViewer.PDFViewer({container: container as unknown as HTMLDivElement,eventBus: pdfEventBus,annotationMode: 0,annotationEditorMode: 0,scriptingManager: pdfScriptingManager,linkService: pdfLinkService,});pdfScriptingManager.setDocument(pdfDocument);pdfScriptingManager.setViewer(pdfViewer);pdfLinkService.setDocument(pdfDocument);pdfLinkService.setViewer(pdfViewer);pdfViewer.setDocument(pdfDocument);pdfEventBus.on('pagesinit', () => {if (pdfViewer) {loading.value = false;// TODO: this code will report error, but not affect results: [offsetParent is not set -- cannot scroll]zoom ? pdfLinkService.setHash(`zoom=${zoom}`) : pdfLinkService.setHash(`zoom=100`);}});} catch {// Init pdf Page error}} </script><template><div class="w-full h-full"><div @click="preview" class="absolute inset-0 cursor-pointer z-[100]" v-if="preview"></div><img :src="useRuntimeConfig().public.loadingPicture" class="absolute object-cover w-full h-full" v-if="loading" /><div :id="`pdfjs-container-${random}`" class="page-container page-thumbnail-container no-scrollbar"><div :id="`pdfViewer-${random}`" class="pdfViewer pdf-thumbnail-viewer"></div></div><a-modal v-model:visible="visible" :footer="null" width="100%" wrap-class-name="ant-full-modal"><template #closeIcon><span class="font-semibold bg-white cursor-pointer text-litepie-primary-600 text-[16px]"><ms-icon path="close-icon" type="svg" :w="48" :h="48" /></span></template><div :id="`pdfjs-modal-container-${random}`" class="page-container page-modal-container"><div :id="`pdfModalViewer-${random}`" class="pdfViewer"></div></div></a-modal></div> </template><style lang="less">.ant-full-modal {.ant-modal {max-width: 100%;top: 0;padding-bottom: 0;margin: 0;}.ant-modal-content {display: flex;flex-direction: column;height: calc(100vh);}.ant-modal-body {flex: 1;padding: 0;}.ant-modal-close {top: 30px;right: 30px;}} </style> <style lang="less" scoped>.page-container {position: absolute;inset: 0;width: 100%;height: 100%;overflow: auto;}/* another way to scale pdf, still will report error :deep(.pdf-thumbnail-viewer) {--scale-factor: 0.5 !important;canvas {width: 100% !important;height: 100% !important;}}*/ </style> - 对于旧版浏览器，新建pdfPreviewForOld.vue，唯一不同的地方是需要替换pdfjsLib导入
import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf.js'; - 新建pdfPreview.vue，导入两个组件
<script setup lang="ts">const supportedOlderBrowser = computed(() => {return getChromeVersion() <= 88 || isSafari();}); </script><template><div><!-- don't change v-if order, otherwise will report error --><pdfPreviewForOld v-bind="$attrs" v-if="supportedOlderBrowser"></pdfPreviewForOld><pdfPreviewForMordern v-else v-bind="$attrs"></pdfPreviewForMordern></div> </template> - 上面用到的判断浏览器的方法
/*** Determine whether it is safari browser* @return {Boolean} true，false*/ export const isSafari = () => getUserAgent().indexOf('safari') > -1 && !isChrome(); /*** Determine whether it is chrome browser* @return {Boolean} true，false*/ export const isChrome = () => /chrome/.test(getUserAgent()) && !/chromium/.test(getUserAgent());export const getChromeVersion = () =>{ let raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);return raw ? parseInt(raw[2], 10) : false; } - 导入后预览pdf文件
<pdf-preview :path="picture.originalUrl" > </pdf-preview>
待优化的问题：
- 为了兼容需要重复写两个组件，试过动态导入的方式行不通
- 控制台会报[offsetParent is not set -- cannot scroll]的错误，但是不影响预览