[Vue/React] PDF Simple Online Preview

[Vue/React] PDF online preview

tool:

[email protected]

code:

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/[email protected]/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();

Effect:

Reference address:

1.https://github.com/bill-mark/pdfjs-usedin-vue
2.https://github.com/bill-mark/pdfjs-usedin-vue