[Vue/React] PDF オンライン プレビュー
道具:
コード:
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();
効果:
参照アドレス:
1. https://github.com/bill-mark/pdfjs-usedin-vue
2. https://github.com/bill-mark/pdfjs-usedin-vue