在手机的网站上面显示pdf

最新推荐文章于 2024-02-22 10:00:23 发布

小码猴

最新推荐文章于 2024-02-22 10:00:23 发布

阅读量2.5k

点赞数

分类专栏： Jquery js 文章标签： js

本文链接：https://blog.csdn.net/qq_41987694/article/details/81477795

版权

js 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

Jquery

2 篇文章 0 订阅

订阅专栏

我们可以用touchPDF.js这个插件来实现在手机的网站上面显示pdf。

首先我们去github上面下载压缩包，地址是：https://github.com/loicminghetti/touchpdf

下载好了之后解压，并把下面这些文件引入到项目中，并在你需要显示pdf的页面引入他们，jquery文件不需要跟我一样版本

引入完成后我们在html中创建一个div容器用于显示我们的pdf

 <form id="form1" runat="server">
    <div id="divShowPdf">
    
    </div>
    </form>

然后我们就开始写js的代码,我们可以写内联js代码,也可以写外联js代码这个不做要求，（因为这些js代码不多，如果代码量有些多，就尽量使用外联js）。

我们演示用内联的js，下面是js代码：

 $(function () {
            $("#divShowPdf").pdf({
                source:"", //要显示pdf图片的路径
                tabs: [
                { title: "第一页", page: 1, color: "orange" }
                ],//这个就是导航标签
                loadingHTML: "正在加载文档,请稍等！",//这个是加载时候显示的文字
                loadingHeight: 10//这个是加载时候显示的高度
            });
        })

其他的属性在上面给出的github地址中有详细的解释。

如果需要改变显示pdf的大小,或者容器的大小可以看这篇文章： https://blog.csdn.net/qq_41987694/article/details/81477102。

就到这里了,大家可以去试试。