前言

关于前端预览pdf，最简单的方式是使用window.open() 直接在浏览器的新窗口打开就好，浏览器本身也是提供了非常多的功能

但是因为客户的某些需求，不能使用浏览器自身的功能。后来又使用了 https://github.com/gjTool/pdfh5，也挺好用的，操作比较简单。使用了一段时间吧，但是还是由于客户的某些需求，最终还是放弃了。

百度查询了一下可以使用 https://github.com/mozilla/pdf.js 来实现功能自定义。

pdfjs

官方文档、examples、API

https://mozilla.github.io/pdf.js/

安装

npm install pdfjs-dist

我的版本是3.0.279，不同版本可能有些不同。如果你是vue2加webpack的项目建议用2.6.347，因为我在老项目中用新版本遇到了各种各样的问题。

加载

<script setup lang="ts">
import { onMounted } from 'vue';
onMounted(async() => {const pdfjs = await import('pdfjs-dist/build/pdf.js');const pdfjsWorker = await import('pdfjs-dist/build/pdf.worker.entry');pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;console.log('pdf', pdfjs);// 加载pdf文件，本地文件会有跨域问题，使用线上文件const url = 'http://....2022-11-07/69c075093c9942dea7dcf86ac691ff9d.pdf';pdfjs.getDocument(url).promise.then(pdfDoc => {console.log('内容：', pdfDoc, pdfDoc.numPages);});
});
</script>

必须异步加载，不然会报错。解决方案来源于：https://github.com/mozilla/pdf.js/issues/10478

渲染

每个PDF页面都有自己的视口，它定义了以像素为单位的大小（72DPI）和初始旋转。默认情况下，视口缩放为PDF 的原始大小，但这可以通过修改视口来更改。创建视口时，还将创建一个初始变换矩阵，该矩阵考虑了所需的比例、旋转，并变换坐标系（PDF中的 0，0 点记录在左下角，而画布 0，0 在左上角）。

<template><div><div class="tool-bar"><div>{{ pdfParams.pageNumber }} / {{ pdfParams.total }}</div><el-button type="primary" :disabled="pdfParams.pageNumber == pdfParams.total" @click="nextPage">下一页</el-button><el-button type="primary" :disabled="pdfParams.pageNumber == 1" @click="prevPage">上一页</el-button><el-button type="primary" @click="rotatePage">旋转</el-button><el-button type="primary" :disabled="pdfParams.scale==5" @click="toBig">放大</el-button><el-button type="primary" :disabled="pdfParams.scale==1" @click="toSmall">缩小</el-button></div><canvas id="pdf-render"></canvas></div>
</template><script setup lang="ts">
import { onMounted, reactive } from 'vue';const pdfParams = reactive({pageNumber: 1, // 当前页total: 0, // 总页数scale: 1, // 缩放rotate: 0 // 旋转角度
});// 不要定义为ref或reactive格式，就定义为普通的变量
let pdfDoc = null;onMounted(async() => {const pdfjs = await import('pdfjs-dist/build/pdf.js');const pdfjsWorker = await import('pdfjs-dist/build/pdf.worker.entry');pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;// 加载pdf文件，本地文件会有跨域问题，下面这个地址是不对的，自行更换const url = 'http://y2/2022-11-07/69c075093c9942dea7dcf86ac691ff9d.pdf';pdfjs.getDocument(url).promise.then(doc => {pdfDoc = doc;console.log('内容：', doc, doc.numPages);pdfParams.total = doc.numPages;getPdfPage(1);});
});// 加载pdf的某一页
const getPdfPage = (number) => {pdfDoc.getPage(number).then((page) => {console.log('page:', page);// 获取视图，并设置缩放const viewport = page.getViewport({scale: pdfParams.scale, // 缩放rotation: pdfParams.rotate // 旋转});console.log('视图：', viewport);const outputScale = window.devicePixelRatio || 1;// 获取canvasconst canvas = document.getElementById('pdf-render');const context = canvas.getContext('2d');// 设置canvas的宽高canvas.width = Math.floor(viewport.width * outputScale);canvas.height = Math.floor(viewport.height * outputScale);canvas.style.width = Math.floor(viewport.width) + 'px';canvas.style.height = Math.floor(viewport.height) + 'px';// 渲染pdfvar renderContext = {canvasContext: context,viewport: viewport};page.render(renderContext);});
};
// 前一页
const prevPage = () => {if (pdfParams.pageNumber > 1) {pdfParams.pageNumber -= 1;} else {pdfParams.pageNumber = 1;}// 重新渲染getPdfPage(pdfParams.pageNumber);
};
// 下一页
const nextPage = () => {if (pdfParams.pageNumber < pdfParams.total) {pdfParams.pageNumber += 1;} else {pdfParams.pageNumber = pdfParams.total;}// 重新渲染getPdfPage(pdfParams.pageNumber);
};// 旋转
const rotatePage = () => {pdfParams.rotate += 90;// 重新渲染getPdfPage(pdfParams.pageNumber);
};
// 放大
const toBig = () => {if (pdfParams.scale < 5) {pdfParams.scale += 0.5;} else {pdfParams.scale = 5;}// 重新渲染getPdfPage(pdfParams.pageNumber);
};
// 缩小
const toSmall = () => {if (pdfParams.scale > 1) {pdfParams.scale -= 0.5;} else {pdfParams.scale = 1;}// 重新渲染getPdfPage(pdfParams.pageNumber);
};
</script><style lang="scss" scoped>
.tool-bar {position: fixed;z-index: 200;left: 200px;
}
</style>

效果

补充

注意：

可以修改的属性如下图：

1、其他属性都比较好理解，transform 和 viewBox 暂时没有弄明白，不建议修改
2、旋转属性：rotation ，如果使用pdfjs提供的方式进行旋转的话要注意旋转的角度必须是90的整数倍。
3、放大的最大倍数是5被

下载
关于下载的功能我没有写，有需要的可以使用FileSaver.js，基本使用见我的这篇文章：FileSaver.js的简单使用

打印
打印功能有需要的话可以看我的这篇文章：前端使用print.js实现打印

前端pdf预览、pdfjs的使用相关推荐

前端实现 PDF 预览的常见方案
前端实现 PDF 预览的常见方案由于在搭建个人博客时,想实现在线预览 pdf 格式的个人简历,经过查阅大致有三大类实现方案:本文共涉及以下 5 种实现方案,如下所示: 使用 HTML 标签 ifra ...
PDF.js + Vue 浏览器以只读方式打开PDF,后台返回文件流，前端实现预览pdf
如果你想光前端完成 office(xls,doc,ppt) 文件的预览,只能提供你这些库来使用 PDF http://mozilla.github.com/pdf.js/ XLS https://gi ...
前端在线预览PDF文件
如何在vue项目中预览PDF格式的文件需求:在vue3.x项目中预览pdf文件提供以下三种方案: 1.Vue-pdf:适用于vue2.x版本,vue3.x需要改一些源码(vue2.x项目极力推荐, ...
vue中前端实现pdf预览（含vue-pdf插件用法）
场景:前端需要根据后端返回的线上pdf的地址,实现pdf的预览功能. 情况一:后端返回的pdf地址,粘贴到浏览器的url框中,是可以在浏览器中直接进行预览的. 方法(1)可以直接使用window.op ...
前端在线预览word,excel,pdf
前端在线预览word,excel,pdf 预览Word 预览pdf 预览Excel 预览Word 微软的在线预览功能,可以预览word.ppt.Excel.PDF 局限: 需要外网能访问文件,如果是只 ...
Vue前端JavaScript实现PDF预览与图片预览
Vue前端JavaScript实现PDF预览与图片预览说明 PDF.JS 代码实现预览测试 embed与iframe标签 `<embed>` `<iframe>` 浏览器预 ...
vueCli3.0文件上传后，后端返回流,前端转换成pdf预览的3种方式
第一种是用: <iframe> 嵌套显示先上效果图: 注:这种还带样式的是我后面修改源码的 js添加的 : customToolbar.js //创建一个新样式 let sheet ...
通过pdfjs实现在VUE-CLI中进行PDF预览，并禁用打印及下载功能
pdfjs 官网:PDF.js 官方demo:PDF.js viewer 安装使用下载点击下载选择稳定版本项目引入本文主要针对vue-cli4版本的文件在public文件夹下新建pdfjs ...
PDF 预览和下载你是怎么实现的？
在开发过程中要求对 PDF 类型的发票提供预览和下载功能,**PDF** 类型文件的来源又包括 H5 移动端和 **PC 端**,而针对这两个不同端的处理会有些许不同,下文会有所提及. 针对 ...

前端pdf预览、pdfjs的使用

前言

pdfjs

补充

前端pdf预览、pdfjs的使用相关推荐

最新文章

热门文章