CXYVIP官网源码交易平台_网站源码_商城源码_小程序源码平台-丞旭猿论坛
CXYVIP官网源码交易平台_网站源码_商城源码_小程序源码平台-丞旭猿论坛
CXYVIP官网源码交易平台_网站源码_商城源码_小程序源码平台-丞旭猿论坛

web前端电子书百度云(深度揭秘)web前端开发技术第三版pdf百度云,基于HTML5 构建的 Web端现代化PDF在线预览插件——PDF.js,

1.web前端书籍百度网盘

引言PDF文件现在在许多企业中常用 – 无论您是要生成销售报告,交付合同还是发送发票,PDF都是首选的文件类型PDF.js是由Mozilla编写的JavaScript库由于它使用vanilla JavaScript实现PDF渲染,因此它具有跨浏览器兼容性,并且不需要安装其他插件。

2.前端电子书百度网盘

在使用PDFJS之前你也可以先了解下原生的PDF对象,本文仅介绍PDFJS官网地址https://mozilla.github.io/pdf.js/下载和安装官网提供了下载入口,有稳定版和Beta版,我们要在生产环境下使用建议使用稳定版,官网给我们提供了三种获取PDF.js的方式

3.web前端开发初级电子书

使用说明我们可以直接使用cdn服务,也可以将下载的文件引入,我们看一下示例代码,这里我提供了两种写法,在项目运行之前,请确保你的同级目录下有一个test.pdf文件//index.html PDF //index.js // var loadingTask = pdfjsLib.getDocument(“test.pdf”); // loadingTask.promise.then( // function(pdf) { // // 加载第一页 // pdf.getPage(1).then(function(page) { // var scale = 1; // var viewport = page.getViewport(scale); // //应用到页面的canvas上. // var canvas = document.getElementById(“pdf”); // var context = canvas.getContext(“2d”); // canvas.height = viewport.height; // canvas.width = viewport.width; // // 渲染canvas. // var renderContext = { // canvasContext: context, // viewport: viewport // }; // page.render(renderContext).then(function() { // console.log(“Page rendered!”); // }); // }); // }, // function(reason) { // console.error(reason); // } // ); // index.js (async () => { const loadingTask = pdfjsLib.getDocument(“test.pdf”); const pdf = await loadingTask.promise; // 加载第一页. const page = await pdf.getPage(1); const scale = 1; const viewport = page.getViewport(scale); // 应用到页面的canvas上. const canvas = document.getElementById(“pdf”); const context = canvas.getContext(“2d”); canvas.height = viewport.height; canvas.width = viewport.width; // 渲染canvas. const renderContext = { canvasContext: context, viewport: viewport }; await page.render(renderContext); })();

4.前端电子书合集

当我们运行项目之后,打开浏览器查看,它已经将pdf的内容渲染到了浏览器中,且显示了第一页,如下图所示:

5.web前端的书

如果就这样的话远远是无法满足我们使用的,因此我们来看一下它比较高级的用法,或者说简单的用法,高级的功能。使用iframe首先我们将我们下载的js包加压,复制里面的web文件夹,粘贴到你的项目目录

6.前端书籍pdf下载

然后修改你的index.html代码,首先注释掉之前引入的js代码,然后修改body,如下

7.web前端开发pdf下载

随后打开我们的浏览器,你会发现一个预览的窗口

8.web前端书籍下载

它继承了我们常用的功能,比如旋转、下载、打印、自适应缩放、放大、缩小等,我们只需要使用iframe引入我们的pdf文件即可,其余的全部交给pdf来完成,即可获得一个实现一个完整的pdf预览功能PDF.js三个不同层。

9.web后端书籍

核心 – PDF的二进制格式在此层中进行解释直接使用该层被认为是高级用法显示 – 该层构建在核心层之上,为大多数日常工作提供易于使用的界面Viewer – 除了提供编程API之外,PDF.js还附带一个现成的用户界面,其中包括对搜索,旋转,缩略图侧边栏和许多其他内容的支持。

10.web开发技术第二版pdf

PDFJS的这三层分开,让我们很好的来根据业务需求来实现我们想要的部分,其简单的api让我们得心应手,总而言之,PDFJS是一个绝佳的PDF预览解决方案总结PDFJS不仅仅支持pdf的二进制文件,同样还支持base64编码的pdf,如果在你的项目中需要用到pdf的预览等功能,无疑它是一种良好的解决方案,当然想要实现相同的功能有许多办法,我们可以选择最适合我们需求的,官方还提供了一个完整的演示Demo,如下截图,如果你觉得本文对你有帮助,请麻烦转发、点赞加关注吧,后续会分享更多实用有趣的技术!。

© 版权声明
THE END
喜欢就支持一下吧
点赞0赞赏 分享
相关推荐
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容