PDF.js实现PDF文件在线预览


前言

网络上的PDF需要下载至本地才能浏览,本方法借助PDF.js项目上传至Gitee仓库,将自己的PDF文件生成链接,实现在线预览。

PDF文件实现在线预览,好处在于:

  • 只需要一个固定的链接,不需要下载就可以浏览文件。

  • 上传的PDF文件可以更新。

实现步骤

下载PDF.js项目→替换PDF.js→上传Gitee仓库→保存链接

Gitee仓库搭建

注册gitee账号并创建仓库

登录码云 https://gitee.com/

创建一个与自己用户名同名的仓库,比如我的gitee账户名是sumsu,那么创建一个sumsu的项目,这样的目的是为了使用giteepages服务,也就是拿这个仓库来做网页。

如果不会使用,可自行百度,方法简单,不过多叙述。

生成SSH密钥

在此之前,需要使用一个命令编辑器和git程序,如果没有的可以下载安装:visual studio codegit

VS code

下载中间这个蓝色的就好了。git点download就好了,下载完成后安装。

打开软件VS code,ctrl+~打开命令框,

$ ssh-keygen -t rsa -C '你的邮箱' -f ~/.ssh/gitee_id_rsa #邮箱使用gitee注册的邮箱

三次回车,这里什么也不用填

在C:\Users\你的用户名.ssh目录下可以看见以.pub结尾的文件,在VS code中将此文件打开。复制所有内容,回到刚刚注册好的gitee账号页面,点击右上角头像-个人主页-SSH公钥-将内容粘贴到gitee公钥中。

SSH

点击确定,完成。

最后可以使用命令测试是否连接成功:

$ ssh -T git@gitee.com    

successfully

连接远程仓库并上传代码文件

Git 全局设置:

git config --global user.name "用户名"
git config --global user.email "你的邮箱"

创建 git 仓库:

mkdir PDF #选择一个路径创建一个名为‘PDF’文件夹,默认在Users/你的电脑用户名/中
cd PDF #进入PDF文件夹中,就好像你双击文件夹进入一样
git init #git 初始话PDF文件夹

创建好文件夹后,将PDF.JS源码下载下来,全部解压后放入PDF文件夹中:

PDF.js项目下载

PDF.js下载地址:PDF.js

DOWNLOAD

将下载完成的文件全部解压

movetopdffolder

将上述的文件移入你创建的PDF文件夹中。

现在只需要将你需要展示的PDF文件放入到web文件夹中,删除原有的PDF文件。(注意PDF文件名称最好不要有中文)

之后回到VS code中执行命令(必须将cd PDF到指定的文件夹下执行):

git add * #git添加所有文件,准备上传
git commit -m "first commit" #提交文件
git remote add origin git@gitee.com:你的gitee用户名/你的gitee用户名.git #连接到gitee远程仓库
git push -u origin master #上传你提交的文件

回到gitee你创建的仓库中,点击服务-giteepages-更新部署。

之后打开链接:

https://你的gitee用户名.gitee.io/web/viewer.html?file=你的pdf文件名.pdf

即可完成。

如果只有一个PDF文件需要上传可以使用默认链接更加简洁:

https://你的gitee用户名.gitee.io/pdf.js/web/viewer.html

但是需要在viewer.js中将默认的PDF文件名修改成需要显示的PDF文件名。

更新PDF文件

之后每一次更新文件时,仅仅每次将web中的PDF文件替换,然后执行命令:

git add * #git添加所有文件,准备上传
git commit -m "xxx" #提交文件
git push -u origin master #上传你提交的文件

回到gitee你创建的仓库中,点击服务-giteepages-更新部署即可。


评论
 上一篇
Autohotkey应用之创建窗口最小最大化快捷键 Autohotkey应用之创建窗口最小最大化快捷键
​ 自己使用电脑,一般情况下都是通过快捷键快速呼出软件、切换软件的,通过快捷键操作电脑很大程度上可以提高工作效率。而电脑绝大多数功能都是有着自带的快捷键的,但是往往会有某些功能没有统一的快捷键,或者自带的快捷键方式操作不方便,
2021-07-02
下一篇 
利用Excel在CAD中指定位置批量输入文本 利用Excel在CAD中指定位置批量输入文本
在工作或学习中,使用CAD的时候会经常有很多麻烦的重复性内容需要输入和调整,对于工作量大的工作内容,纯手动输入会比较麻烦,而且容易出错。然而往往这些操作我们可以借助Excel与CAD结合使用,提高效率。面对那些重复性操作的内容我们一般都可以
2020-10-31
  目录