pdf.js 使用介绍

这篇具有很好参考价值的文章主要介绍了pdf.js 使用介绍。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

项目背景

在网页中加载并显示PDF文件是最常见的业务需求。现在的浏览器大多数都自带pdf预览功能,但是每个浏览器的pdf加载器并不一样,工具栏也无法定制化,为了统一不同浏览器pdf预览的一致性,并增加一些自定义功能,我们使用pdf.js来实现pdf的预览。

pdf.js是一款非常优秀的pdf解析工具,其实我们火狐浏览器内核自带pdf预览解析器就是pdf.js这个解析器,我们把pdf在火狐浏览器打开按F12可以看到源码内容。

pdf.js,Web前端,javascript,前端,开发语言

下面就是项目实现的最终效果,右侧工具栏只留下打印按钮,并在打印的时候触发项目需要的事件,防止复制和下载pdf。

pdf.js,Web前端,javascript,前端,开发语言

pdf.js的使用

官网地址:http://mozilla.github.io/pdf.js,下载稳定版

pdf.js,Web前端,javascript,前端,开发语言

项目结构

pdf.js,Web前端,javascript,前端,开发语言

 项目使用

把项目部署到nginx或者IIS,直接在浏览器中访问viewer.html即可预览我们的pdf,使用方法如下,file为我们要预览的pdf文件地址。

127.0.0.1/pdfjs-2.14.305-dist/web/viewer.html?file=/pdfjs-2.14.305-dist/web/compressed.tracemonkey-pldi-09.pdf

项目自定义

我们需要把右侧工具栏中很多不需要的按钮去掉,并且对按钮事件进行编辑,我们可以使用PDFViewerApplication对象进行调整。

window.onload = function () {
    PDFViewerApplication.appConfig.toolbar.presentationModeButton.classList.add("hidden");
    PDFViewerApplication.appConfig.toolbar.openFile.classList.add("hidden");
    PDFViewerApplication.appConfig.toolbar.download.classList.add("hidden");
    PDFViewerApplication.appConfig.toolbar.viewBookmark.classList.add("hidden");
}
function onbeforeprint() {
    var url = GetQuery1("file");
    var urlParams = parseUrlParams(url);

    $.ajax({
        type: "get",
        url: "/PrintCount?sCardNos=" + urlParams.sCardNos,
        success: function (data) { }
    });
}
window.addEventListener("beforeprint", onbeforeprint);

项目部署

IIS中部署需要增加MIME类型.properties text/plain

pdf.js,Web前端,javascript,前端,开发语言

其他

预览时禁止自动打印,在viewer.js方法_updateFromSandbox中把以下代码注释掉。

pdf.js,Web前端,javascript,前端,开发语言

 pdf.js使用demo(已解决隐藏打印下载等按钮)-Javascript文档类资源-CSDN下载文章来源地址https://www.toymoban.com/news/detail-684854.html

到了这里,关于pdf.js 使用介绍的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端开发——Javascript知识(介绍)

    目录 有关JavaScript的知识  JavaScript的优点   JavaScript的领域 JavaScript的组成 JavaScript的特点 第一个JavaScript程序 在 HTML 文档中嵌入 JavaScript 代码 在脚本文件中编写 JavaScript 代码 JavaScript内容  Html内容  JavaScript 代码执行顺序 JavaScript中的几个重要概念 标识符 保留字 区分

    2024年02月01日
    浏览(47)
  • 大型医院云HIS系统:采用前后端分离架构,前端由Angular语言、JavaScript开发;后端使用Java语言开发 融合B/S版电子病历系统

    一套医院云his系统源码 采用前后端分离架构,前端由Angular语言、JavaScript开发;后端使用Java语言开发。融合B/S版电子病历系统,支持电子病历四级,HIS与电子病历系统均拥有自主知识产权。 文末卡片获取联系! 基于云计算技术的B/S架构的医院管理系统(简称云HIS),采用前后

    2024年02月03日
    浏览(50)
  • 2023年web前端开发之JavaScript进阶(一)

    接上篇博客进行学习,通俗易懂,详细 博客地址: 2023年web前端开发之JavaScript基础(五)基础完结_努力的小周同学的博客-CSDN博客 学习 作用域 、变量提升、 闭包 等语言特征,加深对 JavaScript 的理解,掌握变量赋值、函数声明的简洁语法, 降低代码的冗余度 。 理解作用域对程序

    2024年02月03日
    浏览(57)
  • pdf.js 使用介绍

    在网页中加载并显示PDF文件是最常见的业务需求。现在的浏览器大多数都自带pdf预览功能,但是每个浏览器的pdf加载器并不一样,工具栏也无法定制化,为了统一不同浏览器pdf预览的一致性,并增加一些自定义功能,我们使用pdf.js来实现pdf的预览。 pdf.js是一款非常优秀的pd

    2024年02月10日
    浏览(39)
  • PDF.js介绍以及使用

    PDF.js是一个JavaScript库,可以在现代Web浏览器中渲染和显示PDF文件。它的主要作用是将PDF文件转换为HTML5格式,以便在浏览器上进行展示和交互。 PDF.js的主要功能包括: 在浏览器中显示PDF:PDF.js使用HTML5的canvas元素来呈现PDF页面,使得用户可以在浏览器中直接查看PDF文件,而无

    2024年04月15日
    浏览(32)
  • web前端【3】JS基础-轮播图【JavaScript、定时器、鼠标动作、自动轮播、增加和减少li列表】

    一、实验题目: 轮播图 二、实验内容简介 1.整体布局:图片、左右按钮、数字列表、添加删除按钮 2、左右箭头滚动 3、小圆点滚动 4、自动轮播 5、鼠标动作:指向和离开 6、添加与删除 三、实验过程 1. 需求分析 整体布局:设计一个轮播图,中间部分为自动轮播的图片展示

    2024年02月04日
    浏览(57)
  • 期末前端web大作业——我的家乡陕西介绍网页制作源码HTML+CSS+JavaScript

    家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套、浮动、margin、border、background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大学学习的前端知识点和布局方式都有运用,CSS的代码量也很足、很细致,使用hover来完成

    2024年02月06日
    浏览(387)
  • 常见的web前端开发框架:Vue.js

            常见的Web前端开发框架包括Bootstrap、Vue.js、React.js、Angular.js等。每个框架都有其独特的特点和优势,开发者可以根据项目的需求和个人的喜好来选择合适的框架。同时,随着技术的不断发展,新的框架和工具也会不断涌现,为Web前端开发带来更多的选择和可能性。

    2024年02月20日
    浏览(49)
  • 建站系列(五)--- 前端开发语言之HTML、CSS、JavaScript

    建站系列(一)— 网站基本常识 建站系列(二)— 域名、IP地址、URL、端口详解 建站系列(三)— 网络协议 建站系列(四)— Web服务器之Apache、Nginx 建站系列(五)— 前端开发语言之HTML、CSS、JavaScript 建站系列(六)— 后端开发语言 建站系列(七)— 常用前后端框架

    2024年02月09日
    浏览(56)
  • [HTML]Web前端开发技术26(HTML5、CSS3、JavaScript )JavaScript基础——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 数据类型 数据类型-字符型 数据类型-数值型 数据类型-布尔型 数据类型-其它类型 变量 转义字符 运算

    2024年02月20日
    浏览(70)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包