一、PDF.js 介紹

官方地址

中國(guó)文檔

PDF.js 是一個(gè)使用 HTML5 構(gòu)建的便攜式文檔格式查看器。 pdf.js 是社區(qū)驅(qū)動(dòng)的，并由 Mozilla 支持。我們的目標(biāo)是為解析和呈現(xiàn) PDF 創(chuàng)建一個(gè)通用的、基于 Web 標(biāo)準(zhǔn)的平臺(tái)。

 PDF.js 支持的功能：

• 在線檢索文檔中的內(nèi)容，并支持高亮顯示，匹配大小寫，統(tǒng)計(jì)匹配項(xiàng)等；

• 指定頁(yè)跳轉(zhuǎn)，上下一頁(yè)；

• 下載或連接打印機(jī)打印當(dāng)前預(yù)覽文件；

• 按比例縮放當(dāng)前預(yù)覽的文件，調(diào)整閱讀視野；

• 對(duì)當(dāng)前預(yù)覽的文件，開啟在線演示模式;

• 支持閱讀本地pdf文件;

• 支持大文件分片上傳;

• 支持在 viewer.html 添加水印;

• 可在 viewer.html 中自定義樣式;

二、安裝

1.下載PDF.js

下載地址

下載后得到一個(gè) .zip 的壓縮包

備注：舊瀏覽器版本，不支持uos自帶瀏覽器、微信瀏覽器等更舊版本。

2.解壓到項(xiàng)目中

我用的是 vue3，把它解壓到了 public 文件夾內(nèi)；（我這里用的是【3.11.174】版本，并且把文件名成了fileView，沒需求的可以不用改）

如果是早期版本的vue-cli腳手架放到 static 文件夾下。如果放在 src 文件下，可能不利于引入 viewer.html 進(jìn)行預(yù)覽。

3.允許跨域

在 web/viewer.mjs 或者 web/viewer.js 中搜索 file origin does not match viewer's 并注釋掉。

不然可能會(huì)報(bào)跨域的錯(cuò)誤

三、基本使用

方案一：通過彈窗預(yù)覽

1.創(chuàng)建組件 PDF.vue

<script setup lang="ts">
import { onMounted, ref } from 'vue';
interface Props {
  url: string; // pdf文件地址
}
const props = defineProps<Props>();
const pdfUrl = ref(''); // pdf文件地址
const fileUrl = '/fileView/web/viewer.html?file='; // pdfjs文件地址

onMounted(() => {
  // encodeURIComponent() 函數(shù)可把字符串作為 URI 組件進(jìn)行編碼。
  // 核心就是將 iframe 的 src 屬性設(shè)置為 pdfjs 的地址，然后將 pdf 文件的地址作為參數(shù)傳遞給 pdfjs
  // 例如：http://localhost:8080/pdfjs-4.0.189-dist/web/viewer.html?file=http%3A%2F%2Flocalhost%3A8080%2Fpdf%2Ftest.pdf
  pdfUrl.value = fileUrl + encodeURIComponent(props.url);
});
</script>

<template>
  <div class="container">
    <iframe :src="pdfUrl" width="100%" height="100%"></iframe>
  </div>
</template>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
}
</style>

2.使用組件

列如我們需要預(yù)覽 public 下的一個(gè) test.pdf 文件; 或者換成其他網(wǎng)絡(luò)路徑。

<div class="pdf-box">
  <PDF url="/public/test.pdf" />
</div>

方案二：直接訪問，通過瀏覽器預(yù)覽

<script>
    const fileView = (url:string) => {
        const fileUrl = '/fileView/web/viewer.html?file='; // pdfjs文件地址
        window.open(fileUrl + encodeURIComponent(url), '_blank');
    }
</script>

<template>
<div>
    <!-- 換成 a 標(biāo)簽也是一樣的 -->
    <span @click="fileView(v.fileUrl)" class="mr-20 blue-300" v-for="v in form.fileInfos" :key="v.fileId" style="cursor: pointer;"><u>{{ v.fileName }}</u></span>
</div>
</template>

四、問題與解決方案

Q:如果出現(xiàn)以下問題：

viewer.mjs:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec.

pdf.mjs:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec.

 說明無(wú)法解析.mjs 文件格式

A:解決方法:

方案一：把mjs 的后綴改成js 或者在 .htaccess 添加 

<IfModule mod_mime.c>
  AddType application//javascript js mjs
</IfModule>

方案二：配置 MIME 

1）Nginx

由于nginx無(wú)法識(shí)別mjs文件，從而在http header中錯(cuò)誤的使用 Content-Type:application/octet-stream 來(lái)傳輸mjs文件，導(dǎo)致瀏覽器端認(rèn)為它不是一個(gè)合法的js腳本。

操作如下：找到 Nginx 文件夾下的 mime.types ，我的mimetype文件路徑為  /usr/local/nginx/mime.types

sudo vim /usr/local/nginx/mime.types

將

application/javascript                 js;

改為

application/javascript                 js mjs;

然后

sudo nginx -s reload

就可以了。

如果有可視化工具，也可以鼠標(biāo)右鍵通過記事本編輯

如果有用到 ftl 模版、 gzip 文件或者其他格式，可以按照上面的方法添加，列如:

application/x-freemarker                 ftl;

application/x-gzip                       gz;

2）window

Windows部署到IIS需要設(shè)置MIME類型（沒用到IIS可以忽略）

.mjs  application/javascript
.ftl     application/x-freemarker

方案三：切換版本

PDFjs所有歷史版本

不用mjs的版本就好了，切換到 3.11.174 及以下的版本都可以。

Q:怎么禁用打印下載等功能

A:禁用下載、打印等功能：

不能直接注釋會(huì)報(bào)錯(cuò)，一般建議采用css方式隱藏。例如注釋下載功能：打開web/viewer.html文件，搜索關(guān)鍵字“download”，在相關(guān)代碼段加上style="visibility: hidden;"即可

總結(jié) 

到此這篇關(guān)于使用PDFJS遇到的坑及解決辦法的文章就介紹到這了,更多相關(guān)PDFJS遇到的坑內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論