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

【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.https://github.com/bill-mark/pdfjs-usedin-vue
2.https://github.com/bill-mark/pdfjs-usedin-vue

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值