【Vue/React】PDF简易在线预览

【Vue/React】PDF在线预览

工具:

pdfjs-dist@2.0.943

代码:

html:
<div id="pageContainer">
     <div id="viewer" class="pdfViewer"></div>
 </div>
js:
import pdfjsLib from "pdfjs-dist/build/pdf";
import {
          
    PDFViewer } from "pdfjs-dist/web/pdf_viewer";
import "pdfjs-dist/web/pdf_viewer.css";
 pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/build/pdf.worker.min.js";
import informedConsent from @/assets/informedConsent.pdf

async getPdf() {
          
   
        const container = document.getElementById("pageContainer");
        const pdfViewer = new PDFViewer({
          
   
            container: container
        });
        const loadingTask = pdfjsLib.getDocument(informedConsent);
        const pdf = await loadingTask.promise;
        pdfViewer.setDocument(pdf);
    }
    
getPdf();

效果:

参考地址:

1. 2.

经验分享 程序员 微信小程序 职场和发展