一、PDF.js 介绍

官方地址

中国文档

PDF.js 是一个使用 HTML5 构建的便携式文档格式查看器。 pdf.js 是社区驱动的，并由 Mozilla 支持。我们的目标是为解析和呈现 PDF 创建一个通用的、基于 Web 标准的平台。

 PDF.js 支持的功能：

在线检索文档中的内容，并支持高亮显示，匹配大小写，统计匹配项等；

指定页跳转，上下一页；

下载或连接打印机打印当前预览文件；

按比例缩放当前预览的文件，调整阅读视野；

对当前预览的文件，开启在线演示模式;

支持阅读本地pdf文件;

支持大文件分片上传;

支持在 viewer.html 添加水印;

可在 viewer.html 中自定义样式;

二、安装

1.下载PDF.js

下载地址

下载后得到一个 .zip 的压缩包

备注：旧浏览器版本，不支持uos自带浏览器、微信浏览器等更旧版本。

2.解压到项目中

我用的是 vue3，把它解压到了 public 文件夹内；（我这里用的是【3.11.174】版本，并且把文件名成了fileView，没需求的可以不用改）

如果是早期版本的vue-cli脚手架放到 static 文件夹下。如果放在 src 文件下，可能不利于引入 viewer.html 进行预览。

3.允许跨域

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

不然可能会报跨域的错误

三、基本使用

方案一：通过弹窗预览

1.创建组件 PDF.vue

<code><script setup lang="ts">code>

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() 函数可把字符串作为 URI 组件进行编码。

// 核心就是将 iframe 的 src 属性设置为 pdfjs 的地址，然后将 pdf 文件的地址作为参数传递给 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.使用组件

列如我们需要预览 public 下的一个 test.pdf 文件; 或者换成其他网络路径。

<div class="pdf-box">

<PDF url="/public/test.pdf" />

</div>

方案二：直接访问，通过浏览器预览

<script>

const fileView = (url:string) => {

const fileUrl = '/fileView/web/viewer.html?file='; // pdfjs文件地址

window.open(fileUrl + encodeURIComponent(url), '_blank');code>

}

</script>

<template>

<div>

<!-- 换成 a 标签也是一样的 -->

<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>code>

</div>

</template>

四、问题与解决方案