首页 > 其他分享 >PDF.js插件使用

PDF.js插件使用

时间:2024-02-19 15:55:44浏览次数:29  
标签:web 插件 viewer js html https pdf PDF

使用范围:在支持js的服务器上运行,适合电脑端(手机端没尝试过),使用方便

使用方法:

  1. 下载:https://mozilla.github.io/pdf.js/getting_started/

  2.  解压后如下,将这些文件放到public里面或在public里建立一个自定义名称,如pdfjs的文件夹再放,我这边是直接放入

  3.  预览使用:http://localhost:8080/web/viewer.html?file=test.pdf

    我用的是window.open,url是文件地址,例如:url= 'https://xxx.com/xxx.pdf'

      window.open(             'web/viewer.html?file=' +               encodeURIComponent(url)           )  

    也可以使用iframe:

    <iframe src="/web/viewer.html?file=test.pdf"></iframe>

  4. 跨域:打开web->viewer.mjs(或viewer.js)文件,搜索"file origin does not match viewer's”找到下面代码所在的位置,然后注释掉就可以实现跨域访问了

  5. 禁用下载、打印等功能:不能直接注释会报错,一般建议采用css方式隐藏。例如注释下载功能:打开web->viewer.html文件,搜索关键字“download”,在相关代码段加上style="visibility: hidden;"即可
  6. 部署上IIS时需要设置MIME类型(没用到IIS可以忽略)

    .mjs  application/javascript
    .ftl     application/x-freemarker

 

官方效果预览:https://mozilla.github.io/pdf.js/web/viewer.html

PDF.js中文文档:https://gitcode.gitcode.host/docs-cn/pdf.js-docs-cn/index.html

参考网址:https://blog.51cto.com/u_14866376/5263653https://blog.csdn.net/wan212000/article/details/128217983

 

标签:web,插件,viewer,js,html,https,pdf,PDF
From: https://www.cnblogs.com/YourAnnie/p/18021018

相关文章

  • mysql-udf-http插件的安装与使用
    mysql-udf-http插件的安装与使用查看原文安装curl点击下载地址,下载curl-7.69.0.tar.gz#解压curl-7.69.0.tar.gztar-zvxfcurl-7.69.0.tar.gzcdcurl-7.69.0#配置安装路径./configure-prefix=/usr/local/curl#进行安装make&&makeinstall安装mysql-udf-http点......
  • 如何使用ComPDFKit Web SDK添加在线编辑PDF文档功能
    文档编辑功能提供了一系列的操作页面的能力,使用户能够控制文档结构,并调整文档的布局和格式,确保文档内容以合理有序的方式精准呈现。ComPDFKit文档编辑的优势插入或删除页面: 向文档插入或删除页面,以满足特定的排版要求。文档结构调整: 调整页面排列顺序或旋转方向,以满足特定......
  • JS展开运算符...
    ...)展开运算符又叫剩余运算符。例子:constitem={age:123}constnewItem={...item,['age']:456}console.log("newItem="+newItem.age) ......
  • js判断单行文本是否有溢出
    需求是的单行文本溢出的时候显示展开按钮,需要判断文本是否有溢出       不知道还有没更好的方法,讲究用了,233......
  • Json 递归解析算法笔记
    需求:最近需要处理包含多层的Json字符串解析的问题,比如需要将所有的键值对的值替换,或者将键值对的键替换,包括嵌套对象里面的。大致知道需要使用递归来操作,先记录大致步骤吧。思路:写好一个固定的函数专门处理替换步骤;在这个函数内分别判断值是数组,还是对象,还是值(值走上面的递......
  • js定时任务
    JS定时任务1.页面上2秒执行一次任务:setInterval(function(){//执行任务},2000);//取消执行clearInterval();2.延时执行:JS都是延时执行的,没有多线程概念,碰到要使用全局变量的时候,要使用递归来实现全局变量数值变化!3.页面上只......
  • 这款完全自定义配置的浏览器起始页插件值得你收藏!
    大家好,我是Java陈序员。浏览器是我们上网冲浪的必备工具,每次打开浏览器默认都是先看到起始页。有的浏览器起始页十分简洁美观,而有的则是充满了各种网址导航和广告。今天,給大家介绍一个浏览器起始页配置插件,支持自定义配置。关注微信公众号:【Java陈序员】,获取开源项目分享、A......
  • 前端知识回顾概览--vue.js 从入门到精通
    vue目前最火的前端框架之一对vue原理有深入了解可以基于vue开发应用对vue3.0有实战经验1. vue.js基础vue.js简介vue.js模版及指令vue.js事件/数据绑定vue.js组件化标签中的新属性vue.js组件生命周期2. vue.js高级用法mixin复用vue.js动画特效&......
  • 前端知识回顾概览--Node.js-全栈基石
    了解web服务端编程,对运行原理与流程有深入理解能使用nodejs解决实际问题 1.node.js基础node.js环境搭建及原生模块解析node.jsCommonJS模块化及相关源码解析手写CommonJS规范实现原理2.node.js原理详解node.js事件循环模型Buffer/stream/events详解G......
  • 关于小说阅读前端翻页插件推荐turn.js
    http://www.turnjs.com......