PDF.js 文件预览实战：静态资源、Canvas 渲染与分片加载优化

    contentUrl.current = content.includes("pdf")
    ? `/static/pdfjs-3.1.81-dist/web/viewer.html?file=${content}`
    : content;
    <iframe src={contentUrl.current}></iframe>

npm install pdfjs-dist

const contentRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
//content就是 iframe 请求的url，这里是因为我的项目里面需要判断下他url是否涵盖了pdf
//如果涵盖了才使用pdf.js
  content.includes('pdf')
  //重点是 loadPdf() 这个函数，就是我们使用 pdf.js 的函数
    ? loadPdf(contentRef.current, content, loadingRef.current)
    : null;
}, [content]);
<div className="content-wrapper" ref={contentRef}>
  {content.includes('pdf') ? null : <iframe src={content}></iframe>}
  <div className="loading" ref={loadingRef} style={{ display: 'none' }}></div>
</div>

import * as pdf from 'pdfjs-dist';
import pdfWorker from 'pdfjs-dist/build/pdf.worker.js?url';
pdf.GlobalWorkerOptions.workerSrc = pdfWorker;
/**
 * @desc 使用pdf.js加载pdf
 * @param contentDom
 * @param url
 */
export const loadPdf = async (
  contentDom: HTMLDivElement | null,
  url: string,
  loadingDom: HTMLDivElement | null
) => {
//得到请求的 pdf 文件
  const loadingTask = pdf.getDocument({
    url: url,
    disableRange: true
  });
  //loading效果,下载pdf过程中展示loading
  loadingTask.onProgress = () => {
    if (loadingDom) {
      loadingDom.style.display = 'block';
    }
  };
  loadingTask.promise.then((pdfDoc) => {
  //下载完成时，loading消失
    if (loadingDom) {
      loadingDom.style.display = 'none';
    }
    //得到 pdf 总页数
    const totalPages = pdfDoc.numPages;
    for (let i = 1; i <= totalPages; i++) {
      pdfDoc.getPage(i).then((page) => {
        const canvas = document.createElement('canvas');
        canvas.setAttribute('id', `the-canvas${i}`);
        const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
        const dpr = window.devicePixelRatio || 1;
        const scaledViewport = page.getViewport({ scale: 1 });
        canvas.height = Math.floor(scaledViewport.height * dpr);
        canvas.width = Math.floor(scaledViewport.width * dpr);
        canvas.style.width = document.body.clientWidth + 'px';
        canvas.style.height =
          document.body.clientWidth / (canvas.width / canvas.height) + 'px';
        const transform = dpr !== 1 ? [dpr, 0, 0, dpr, 0, 0] : undefined;
        const renderContext = {
          canvasContext: ctx,
          viewport: scaledViewport,
          transform: transform
        };
        page.render(renderContext);
        contentDom?.appendChild(canvas);
      });
    }
  });
};

canvas.style.height = document.body.clientWidth / (canvas.width / canvas.height) + 'px';

const loadingTask = pdf.getDocument({
		url: url,
		//disableRange: true,  
		rangeChunkSize: 65536 * 16,
		disableAutoFetch: true
	});