文件預覽PDF.js使用技巧有哪些

這篇文章主要講解了“文件預覽PDF.js使用技巧有哪些”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“文件預覽PDF.js使用技巧有哪些”吧！

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轉成圖片再顯示的形式。

感謝各位的閱讀，以上就是“文件預覽PDF.js使用技巧有哪些”的內容了，經過本文的學習后，相信大家對文件預覽PDF.js使用技巧有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！