目录

• Pdf.js有两种使用方式
• 把pdf.js当作静态资源使用
• npm下载，通过import使用
• API(记录一下，防止忘记）

Pdf.js有两种使用方式

在这次的项目中用到了pdf文件的预览功能，选择了pdf.js去预览pdf文件，实现滑动展示所有的pdf

• 通过 npm 下载
• 直接下载 pdf.js 库，当作静态资源使用

把pdf.js当作静态资源使用

最开始我采取的是把pdf.js当作静态资源使用，使用方法如下：

• 官网下载后解压项目得到 pdf.js
• 放到项目文件夹 /public/static/ 下
• 直接将 web/viewer.html 后面的 file 跟上自己自己的 pdf 文件即可

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

使用静态资源时，如果需要更改他的默认样式需要自己手动改源代码

同时可能我们遇到了跨域问题，我们需要在源码中的判断跨域代码注释掉

使用静态资源的问题是在移动端不能手势放大缩小，需要我们自己编写代码然后修改源代码强制放大缩小

这种方式不细讲，网上很多使用方式都是通过使用静态资源，可以自行去查看，这里只讲一个大概。

npm下载，通过import使用

方法如下：

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);
      });
    }
  });
};

上面的代码展示了我使用pdf.js的整个使用过程，主要思路是先获取到pdf文件，然后得到总页数后通过生成响应页数的canvas，然后再渲染到页面上展示pdf

这里需要注意的是scaledViewport.height得到的是你的pdf文件本身的宽高，我们需要通过这个宽高进行适配我们自己的屏幕，同时需要保证他的清晰度，所以我们需要保证canvas两个宽高的尺寸是一致的。

canvas 本身有两个宽高，标签的 width 和 height 是绘画区域实际宽度和高度，绘制的图形都是在这个上面。而 style 的 width 和 height 是 canvas 在浏览器中被渲染的高度和宽度,如果 canvas 标签中没有定义 width 和 height 时,默认会给宽 300 高 150,所以就出现了拉伸的效果,不想用默认的宽高的话,尽量在标签中写上宽高的属性。

所以，如上面的代码一样，宽度就是整个屏幕的宽度，但是每个pdf页面的高度，需要保证和canvas.width/canvas.height的尺寸一致

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

这样就能展示pdf文件了

这里又存在一个问题，文件过大，而pdf.js的渲染原理是需要将整个pdf文件下载下来后，再进行展示，这就导致了白屏的时间过长，用户体验感不好，然后我们就想到了分片下载

我们需要在 getDocument()这个api上增加一些配置

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

分片下载还有一个很重要的点，就是需要判断下你访问的pdf是否支持分片下载,使用了分片下载的请求是后续会通过你的分片大小发送206请求

HTTP206状态码代表的意思是 请求已成功处理，但仅返回了部分内容，即 HTTP 206 Partial Content 响应状态。

HTTP 206 (Http Status Code 206) 状态是HTTP协议的一种响应码，是我们请求访问网站时，服务器端返回的2xx 成功状态系列响应码之一。

查看是否支持分片下载

需要有这个响应头才是支持分片下载 accept-range:bytes

但后面我们遇到一个问题：我们的pdf链接存在这个响应头，但却不支持分片下载，后面通过对比发现是这个响应头 access-control-expose-headers 的问题

响应标头 Access-Control-Expose-Headers 允许服务器指示哪些响应标头应该对浏览器中运行的脚本可用，以响应跨源请求。

我们最开始这个响应头里面的内容没有Access-Control-Expose-Headers，意味着就算存在 accept-range 这个响应头，浏览器也不可用，所以在后面我们添加上这个响应头的内容后就可以使用分片下载了。

API(记录一下，防止忘记）

这个api来源于掘金的某位大佬

最后，发现可能是这个库的问题还是什么，目前不太清楚，他总是从13M以上才开始快速渲染，而我们当时的文件大小差不多也是13M，所以采用了分片下载后，还是存在一段比较长的白屏时间，所以最后还是选用了将pdf转成图片再显示的形式。