在手机的网站上面显示pdf

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

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

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

  <link href="jquery.touchPDF.css" rel="stylesheet" />   

    <script src="jquery-1.8.3.js"></script>
    <script src="PDFObject.js"></script>
    <script src="Pdf_Mobile/pdf.compatibility.js"></script>
    <script src="Pdf_Mobile/pdf.js"></script>
    <script src="Pdf_Mobile/jquery.touchSwipe.js"></script>
    <script src="Pdf_Mobile/jquery.touchPDF.js"></script>
    <script src="Pdf_Mobile/jquery.panzoom.js"></script>
    <script src="Pdf_Mobile/jquery.mousewheel.js"></script>
    <script src="Pdf_Mobile/pdf.worker.js"></script>

引入完成后我们在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.youkuaiyun.com/qq_41987694/article/details/81477102。

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