pdf.js使用方法「建议收藏」

pdf.js使用方法「建议收藏」项目中显示pdf的功能,浏览过不少的技术帖,都不太理想,花了点时间研究了下pdf.js正确使用方法,总结下:1.防止自己忘记2.工作留有痕迹3.供大家参考借鉴pdf.js:将PDF文件解析后生成一张.png图片,利用canvas元素显示在页面上,此方法不推荐使用,呈现在页面上的pdf会模糊,目前没有找到有效解决办法,给爱钻研的小伙伴提供个思路,在pdf.js官网上有…

大家好,又见面了,我是你们的朋友全栈君。

应各位博友要求已经取消付费 2022.3.20

项目中 显示 pdf 的功能,浏览过不少的技术帖,都不太理想,花了点时间研究了下pdf.js正确使用方法,总结下:1.防止自己忘记 2.工作留有痕迹 3.供大家参考借鉴

pdf.js: 将 PDF 文件解析后生成一张 .png 图片,利用 canvas 元素显示在页面上,此方法不推荐使用,
呈现在页面上的pdf会模糊,目前没有找到有效解决办法,给爱钻研的小伙伴提供个思路,在pdf.js官网上有这样一句话 :
 Each PDF page has its own viewport which defines the size in pixels(72DPI) and initial rotation. 
猜想如果可以改变默认72DPI就可改变呈现的清晰度

上面是最开始探索 pdf.js 使用的方法 时 的猜想 其实 pdf.js 真正使用方法非常简单 (一行代码就可以搞定)

pdf.js使用步骤

一. 到官网下载 pdf.js 插件并解压  (地址: PDF.js )

1: 进入官网

pdf.js使用方法「建议收藏」

 2 : 选择稳定版 下载

pdf.js使用方法「建议收藏」

3: 下载至本地 

pdf.js使用方法「建议收藏」

4 : 解压 

pdf.js使用方法「建议收藏」

5:创建PDF.js文件夹 并将刚解压的文件放入其中

pdf.js使用方法「建议收藏」

二.将 PDF.js 文件夹 放到 项目服务器根目录下

小伙伴 可能会有点头晕 先跟着做 稍后解释

1.登录 项目服务器 

pdf.js使用方法「建议收藏」

2.登录 服务器 后将 PDF.js 文件夹 拷贝 到 项目 服务器 的根目录

pdf.js使用方法「建议收藏」

三. 使用 pdf.js 显示 pdf 文件

1.打开浏览器 新建一个 标签页 输入 你的项目服务器 地址

这里我用我的服务器 地址进行演示 10.0.0.5 

pdf.js使用方法「建议收藏」

2.当 你访问 项目 服务器 根目录(10.0.0.5) 能够 看到 PDF.js 这个文件夹 说明 这一步已经完成了

3.在PDF.js 中 依次打开 web 文件夹 viewer.html 文件 (PDF.js/web/viewer.html)

4.随后会显示 截图上的 pdf 文件

pdf.js使用方法「建议收藏」

5.在地址栏中 http://10.0.0.5/PDF.js/web/viewer.html?file=你的pdf地址

pdf.js使用方法「建议收藏」

解释: 我这里显示的pdf文件 是服务器上本来 就有的测试文件 请看下图

pdf.js使用方法「建议收藏」

如果 你的 地址栏 中 ? 后面 file = PDF地址  可以显示 pdf 那么 基本上成功了

四. 在项目中使用

 <iframe :src="http://10.0.0.5/PDF.js/web/viewer.html?file=PDF地址" width="100%" height="99%"></iframe>

开篇 说一行代码就可以搞定 没有骗你吧

到这里 PDF.js 的使用讲述完了


下面提供的下 我的github 上的pdf.js 使用方法 
点我下载PDFViewer;

使用方法都在 README.md 文件中

如果不了解gitHub的同学请往下看:

  1. 点我下载会跳到这个页面

pdf.js使用方法「建议收藏」

    2.点击页面上绿色按钮 clone or download

pdf.js使用方法「建议收藏」

    3.剩下的步骤 按照 readme.md 做就可以了

创建一个交流群(QQ)

群名称:PDF.js

群   号:754891076

pdf.js使用方法「建议收藏」

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/157683.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • KETTLE教程-初探

    KETTLE教程-初探KETTLE概念、学习指南

  • JAVA中interface接口的使用[通俗易懂]

    JAVA中interface接口的使用[通俗易懂]提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、interface是什么?二、关于interface的使用1.接口的格式代码例子12.用登录方法具体实现代码例子2:抽象类和接口之间的区别总结前言随着面向对象思想的发展,类的使用越来越方便,但是有时候类却不能实现对于方法的抽象,只能对于自己的属性的抽象。(所谓抽象简单理解为没有具体的实现)于是我们便在java语言中引出了一种接口的方式(interface)。(以下内容基于JAVA语言)提示:以下是本篇文章正文内容.

    2022年10月21日
  • 桌面太单调?一起用Python做个自定义动画挂件,好玩又有趣!

    桌面太单调?一起用Python做个自定义动画挂件,好玩又有趣!前言前段时间,写了篇博客关于Python自制一款炫酷音乐播放器。有粉丝问我,音乐播放器为什么要用PyQt5,效果是不是比Tkinter赞?PyQt5真的可以实现这些炫酷的UI画面吗?之前没接触过PyQt5,能不能多分享一些这方面的开发案例?今天就带大家,一起用Python的PyQt5开发一个有趣的自定义桌面动画挂件,看看实现的动画挂件效果!下面,我们开始介绍这个自定义桌面动画挂件的制作过程。一、核心功能设计总体来说,我们需要实现将自己喜欢的动态图gif或者视频转成一个桌面动画挂件,并且可以通过鼠

  • declare-styleable的使用

    declare-styleable的使用declare-styleable的使用-carlosk-博客园declare-styleable是给自定义控件添加自定义属性用的1.首先,先写attrs.xml…

  • PHP操作Redis数据库常用方法

    PHP操作Redis数据库常用方法

  • Flask中jsonify和json.dumps用法以及区别(简单案例)[通俗易懂]

    Flask中jsonify和json.dumps用法以及区别(简单案例)[通俗易懂]环境:python3.6,Flask1.0.3flask提供了jsonify函数供用户处理返回的序列化json数据,而python自带的json库中也有dumps方法可以序列化json对象.其二者的区别,写个简单的案例实测一下便见分晓。fromflaskimportFlaskfromflaskimportjsonifyimportjsonapp=F…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号