vue3 / react使用pdf.js最简单的方式，带操作工具栏，支持PDF批注、加密，支持移动端PDF，ts-pdf-viewer使用体验

技术笔记 2021年5月21日 18:05 原创文章手机阅读

ts-pdf-viewer 是一个非常不错的 typescript 库，功能全面。看起来这是一个新库，用户不多，为了支持作者，送上一个小星星。
附上仓储地址：https://github.com/yermolim/ts-pdf-viewer

介绍下功能：

打开和查看PDF
添加和编辑PDF批注
支持自定义分析和呈现不同类型的批注
轻松序列化为JSON数据传输对象的注释导入/导出
符合官方PDF规范
支持加密PDF文件，支持文件流模式
用户界面反应灵敏，触摸设备支持
简单颜色方案定制，使用CSS变量覆盖默认值
虚拟Dom，最小外部html冲突

如何使用

// 安装包
npm install ts-pdf-viewer 
// 导入引用
import { TsPdfViewer, TsPdfViewerOptions } from "ts-pdf-viewer";

官方的使用方式片段

async function run(): Promise<void> {  
  const options: TsPdfViewerOptions = {
    containerSelector: "#your-html-container-selector", 
    workerSource: "assets/pdf.worker.min.js", // path to the PDF.js worker script
    userName: "your_username",
    // you can check other properties using your editor hints
  };
  const viewer = new TsPdfViewer(options);
  await viewer.openPdfAsync("your_file.pdf");
} 

run();

Vue3 中使用方式

<template>
  <div id="container"></div>
</template>

// vue setup()

const options: TsPdfViewerOptions = {
    containerSelector: "#container", 
    workerSource: 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.7.570/pdf.worker.min.js', // 也可用使用本地pdf worker
    userName: "521.org.cn"
  };
onMounted(async () => {
  const viewer = new TsPdfViewer(options);
  let pdfViewer = await viewer.openPdfAsync("https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf");
})

vue3 / react使用pdf.js最简单的方式，带操作工具栏，支持PDF批注、加密，支持移动端PDF，ts-pdf-viewer使用体验

评论