PDFJS 解析pdf

原创

已于 2024-01-23 11:08:08 修改 · 9k 阅读

标签

#js

收录于

于 2022-09-02 11:26:37 首次发布

1.引入pdf.js文件

官网地址：PDF.js

有对应的示例git clone后，将viewer.html open whith live server

注：若针对pdf还有个性化的功能，不建议直接引入pdf.js 方法，里面的事件都是原生js的写法，而且有关pdf的配置也很多

2. pdfjs-dist

（1）安装 pdfjs-dist （版本2.0.943，其余版本都出现过问题）

npm i pdfjs-dist@2.0.943

（2）引用 pdfjs-dist

import * as pdfjsLib from 'pdfjs-dist';

const workerSrc = import('pdfjs-dist/build/pdf.worker.entry');
export default () => {
  pdfjsLib.GlobalWorkerOptions.workerSrc = workerSrc;
  // pdf 资源
  const [pdfRefList, setPdfRefList] = useState([]);
  // 当前页码
  const [currentPage, setCurrentPage] = useState(1);
  
  const getDetail = (pageNum, href) => {
    const loadingTask = pdfjsLib.getDocument({
      url: href,  // pdf文件地址 或者 请求资源地址
      cMapUrl: 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/', // 使用cdn加载pdf.js提供的字体文件。
      cMapPacked: true, // 此参数需要设为true 
    });
    loadingTask.promise.then((loadedPdf) => {
      const pdf = [{ id: pageNum, detail: loadedPdf }];
      setPdfRefList(pdf);
      setCurrentPage(pageNum);
    }, function (reason) {
      console.log(reason);
    });
  }

 useEffect(() => {
   pdfRefList&& pdfRefList.map((pdf) => {
      pdf.detail && pdf.detail.getPage(pageNum).then(function (page) {
        const viewport = page.getViewport(1.5);
        const canvas = document.getElementById('canvas' + pdf.id);
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        const canvasContext = can