网站开发所需要的技术,江苏seo百度推广,免费空间域名可以做淘宝客网站推广吗,个人可以备案网站的内容pdf文件预览 简单了解PDF.js代码实现首先#xff0c;引入依赖实现预览逻辑 简单了解PDF.js
PDF.js是一个JavaScript库#xff0c;可在浏览器中无插件显示PDF文件#xff0c;提供缩放、翻页、文本搜索等功能。本文介绍了其基本使用方法和示例代码#xff0c;如添加翻页和搜… pdf文件预览 简单了解PDF.js代码实现首先引入依赖实现预览逻辑 简单了解PDF.js
PDF.js是一个JavaScript库可在浏览器中无插件显示PDF文件提供缩放、翻页、文本搜索等功能。本文介绍了其基本使用方法和示例代码如添加翻页和搜索功能。
PDF.js的主要功能包括
在浏览器中显示PDFPDF.js使用HTML5的canvas元素来呈现PDF页面使得用户可以在浏览器中直接查看PDF文件而无需依赖外部的PDF阅读器插件支持基本的浏览功能PDF.js提供了一套用户界面包括缩放、滚动、翻页等浏览功能使用户能够方便地导航和浏览PDF文件。支持文本搜索PDF.js可以对PDF文件进行文本搜索用户可以输入关键字来查找并定位到相应的内容。支持页面导航PDF.js提供了页面导航功能用户可以跳转到特定的页面或者在查看多页PDF时进行翻页。支持缩放和旋转PDF.js允许用户调整PDF页面的缩放级别并可以旋转页面以适应不同的阅读需求。支持批注和标记PDF.js可以让用户在PDF文件中进行批注和标记例如划线、画框、添加注释等以便在阅读或共享时进行交流和标记重点。
下面会把简单时间文件预览的代码呈现出来如果您想要进一步优化和学习PDF.js可以打开官方文档学习
代码实现
我这个举例的项目是一个H5但是引入的有vue所以写法是在H5的页面使用vue
首先引入依赖
script src../../js/vue.js/script
script src../../js/jquery.min.js/script
script srchttps://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.7.570/pdf.min.js/script如果您使用的是纯vue项目可以通过npm/pnpm/yarn安装依赖
实现预览逻辑 div stylewidth: 100%; idpdfPreview/divmounted() {const fileId getParam(fileId)this.getFile(fileId)},
methods:{$.ajax({url:/api-file/file/getFileByte,type: post,responseType:blob,data: {fileId: fileId,},beforeSend: function (request) {request.setRequestHeader(Authorization, Bearer JSON.parse(window.sessionStorage.getItem(store) || {}).token);},success:(res) {// 将Base64字符串转换为二进制字符串const path res.dataconst raw window.atob(path);const rawLength raw.length;const uInt8Array new Uint8Array(rawLength);for (let i 0; i rawLength; i) {uInt8Array[i] raw.charCodeAt(i);}const loadingTask pdfjsLib.getDocument({data: uInt8Array})loadingTask.promise.then(function(pdf){// 获取 PDF 的页数var numPages pdf.numPages;// 遍历每一页for (var pageNumber 1; pageNumber numPages; pageNumber) {pdf.getPage(pageNumber).then(function(page) {var viewport page.getViewport({scale: 1.5});// 创建canvas元素var canvas document.createElement(canvas);// 获取目标元素var target document.getElementById(pdfPreview);// 将canvas元素插入到目标元素中target.appendChild(canvas);var context canvas.getContext(2d);canvas.height viewport.height;canvas.width viewport.width;// 渲染页码var renderContext {canvasContext: context,viewport: viewport};page.render(renderContext).promise.then(function() {console.log(PDF 预览成功);});});}}).catch(function(error) {// 错误处理console.error(加载PDF时发生错误: , error);});},error:(err) {alert(文件加载失败请稍后重试)}
}上面代码只是简单的展示出来文件没有实现分页和缩放如果需要可以自己去查询一下
