网页部署到服务器以及浏览器预览PDF

最近妹子要找工作,做了一些html文件,想要放在网站上,将链接放到简历上。让人家直接预览自己所做的工作,并且将自己做的报告放到网上,实现直接预览PDF功能。

知道这些需求之后,我就开始行动了。趁着自己还是学生。买了阿里的一个月的云服务器。一个月9.5。感觉还行吧。虽然比本科的时候,1元一个月的

阿里云跟腾讯云相比确实好用很多。有很多镜像可以使用。例如WordPress、LAMP环境等等。

在这里,为了方便,我们选择了基于Centos的LAMP的应用镜像。之所以没有选择WordPress的,是因为我们这里并不是想用WordPress,而是只是想使用Apache服务器。

好了,选择好系统之后,如下图所示,我们选择安全->防火墙->添加规则

然后将FTP端口加入到规则中。这样我们就能使用FTP连接到服务器了。

为了安全起见,我们需要点击服务器运维->远程连接->设置密码,设置好密码。

准备好这些活动后,我们就开始吧~

下面所有的操作客户端环境均为Ubuntu 16.04

网页部署

首先ssh连接到服务器,输入以下指令,输入密码,即可连接到服务器啊。

1
ssh -l root 47.103.17.102

查看Apache服务器默认解析的目录

1
2
/usr/local/apache/conf
cat httpd.conf

然后可以看到如下的字样,所以在我的这个服务器默认解析的地址为/home/www/htdocs。为了方便,我这里不更换解析地址了,保持默认。

1
2
DocumentRoot "/home/www/htdocs"
<Directory "/home/www/htdocs">

知道了Apache默认目录后,将网站上传到该目录。首先使用sftp链接到服务器

1
sftp root@47.103.17.102

这里我使用了默认端口,如果你的为自定义端口,以27950为例,对应的指令为sftp -P 27950 root@47.103.17.102

我们网页的文件在/home/zdaiot/Download下,文件为QS.tar.gz。所以在上面打开的sftp端口,输入指令为

1
2
cd /home/www/htdocs
put /home/zdkit/Download/QS.tar.gz

若想下载文件,指令为pull 文件

接着,回到我们的ssh终端。将上传的文件解压

1
2
cd /home/www/htdocs
tar -zxvf QS.tar.gz

此时我们的网站目录,即/home/www/htdocs。文件样例如下,注意,若我们直接输入域名或者IP地址,不加任何后缀,是直接指向index.html文件的。

这里在网上找了一个图,只是为了说明,网站是在/home/www/htdocs根目录的,不需要再新建文件夹。

此时,在浏览器终端输入http://47.103.17.102就能访问了。但是发现,css文件、js文件和资源文件均没有加载进来。打开浏览器调试,提示说

1
Failed to load resource: the server responded with a status of 403 (Forbidden)

经验告诉我,这应该是网站文件夹全新的问题,在ssh终端,更改如下:

1
2
cd /home/www
chmod -R 755 htdocs/

此时在浏览器输入http://47.103.17.102应该就正常了。

浏览器预览PDF

关于这个功能,还不太清楚能不能实现。但是考虑arxiv.org实现了相关功能。应该有开源项目吧。果然一搜是有的,github地址

但是,感觉按照readme中的写法,感觉还是有点复杂。在网上找到了一个简单的教程。

首先,从官网下载文件。如下所示,我们这里下载Stable

我们直接下载并解压到服务器,在上面图中,双右击Stable,选择Copy link address。在ssh终端中输入:

1
2
3
4
5
cd /home/www/htdocs
mkdir PDF.js
cd PDF.js
wget https://github.com/mozilla/pdf.js/releases/download/v2.1.266/pdfjs-2.1.266-dist.zip
unzip pdfjs-2.1.266-dist.zip

此时,/home/www/htdocs/PDF.js的文件如下:

此时,输入http://47.103.17.102/PDF.js/web/viewer.html就能访问PDF文件了。

但是此时是默认的PDF文件,如何自定义访问的PDF文件呢?

首先,在SFTP终端中,输入

1
2
cd /home/www/htdocs
put /home/zdkit/Downloads/d2l-zh.pdf

此时,就可以指定访问该pdf文件了。在浏览器中输入http://47.103.17.102/PDF.js/web/viewer.html?file=http://47.103.17.102/d2l-zh.pdf

但是,这个名字好长啊,让我感觉不爽。在摸索之后,发现它默认访问的PDF文件保存在了cd /home/www/htdocs/PDF.js/web/文件夹下的。所以我就摸索出了下面的方法,将我们自己的PDF文件也放在这个文件夹。在SFTP终端中,输入

1
2
cd /home/www/htdocs/PDF.js/web/
put /home/zdkit/Downloads/d2l-zh.pdf

此时,就可以在浏览器输入http://47.103.17.102/PDF.js/web/viewer.html?file=d2l-zh.pdf访问这个PDF了。效果如下:

好了,教程就到此结束了。祝妹子早点找到工作~~~

缩短链接

本来应该结束的,但是现在的链接还是太长了。于是乎,就有了下面的步骤。首先为了调试方便,我在本地Ubuntu16.04系统下安装了Apache服务器。

1
sudo apt-get install apache2

接着在本地浏览器输入127.0.0.1就可以看到网址了。该Apache默认解析地址为/var/www/html。接着开始我们的PDF.js的改造过程。首先,解压我们下载的pdfjs-2.1.266-dist.zip。得到的目录如下。

我们的网址为http://47.103.17.102/PDF.js/web/viewer.html?file=d2l-zh.pdf。IP地址后面有一个web,我们想办法把这一级目录给去掉。使用Vscode打开这个目录,搜索所有的../build/build下的文件,全部换成build下的文件。例如搜索../build/pdf.worker.js,换成pdf.worker.js

然后就可以将所有的build的文件夹放入web文件夹中了。IP地址后面还有一个?file=d2l-zh.pdf,为了简便,我们将默认的文档换成我们的文档。方法为搜索compressed.tracemonkey-pldi-09.pdf,全部替换为report.pdf

再分析,感觉viewer.html名字有点长,直接重命名为qs,发现可以解析。

此时,将所有改过的文件上传到我们服务器/home/www/htdocs/PDF.js/web目录。

尝试更改所有的?file=?、?=、?f=均失败。直接替换为空也不行。

最后,IP地址下有一个目录为PDF.js,这个是我们自己建立的。直接将PDF.js/web目录下的所有文件移动到/home/www/htdocs目录。但是出现了一个问题,我的PDF.js/web目录下有images文件夹,而/home/www/htdocs也有同名的文件夹。解决方法为使用指令

1
2
cd /home/www/htdocs/
rsync -av PDF.js/web/images/ ./images/

这所有的操作完毕后,就可以使用47.103.17.102/qs访问我们的pdf了。

上述链接的http://均可去掉。

默认打开书签

那么,在我们输入域名的时候,如何保持默认pdf大小,并设置默认打开书签呢?这个我摸索了好久,呜呜呜。

在windows下打开Adobe Acrobat DC软件,点击工具->创建pdf,选择对应的word文档后,点击高级设置,如下图,勾上添加书签到Adobe PDF文件。然后生成pdf文件。

右击pdf文档,选择文档属性。如下图所示

在文档属性中,找到初始视图,选择导航标签放大率,设置如下:

然后将该pdf保存到本地并上传到服务器。

在知道这个之前,我还摸索了,将viewer.js文件中,两处sidebarViewOnLoad后面的值从-1改成了2,但是实际发现并不是这个起作用。

参考

apache默认目录配置的问题(修改它默认访问的html文件)
将网页部署到服务器上
pdf.js使用方法
Modify a number of the viewer preferences, whose current default value is 0, such that they behave as expected with the view history
Document outline sidebar opens on load

------ 本文结束------
坚持原创技术分享,您的支持将鼓励我继续创作!

欢迎关注我的其它发布渠道