改变touchPDF.js的pdf的大小

当我们用touchPDF.js这个插件shi实现手机端在网页在线显示pdf的时候,是不是会为了touchPDF.js所显示pdf的大小而苦恼呢？

(用手机网站上面显示pdf可以去看一下这篇文章，地址是：https://blog.csdn.net/qq_41987694/article/details/81477795)

下面,我们就来解决这个问题。

第一步 改变显示pdf容器的大小

首先,我们打开jquery.touchPDF.js这个文件，在650行左右，会有这一行代码

 

                                $viewer
				.css("width", pdfWidth)
				.css("height", pdfHeight)
				.css("left", tabWidth)
				.css("top", TOOLBAR_HEIGHT)
				.css("border-width", BORDER_WIDTH);

这一行代码就是显示pdf的容器 我们可以在 width，height，left，top改变他们的值来进行移动位置，变大变小，也可以自己加css样式。

第二步 改变导航标签的外左右边距（导航的位置不会跟着容器的位置变化而变化,需要自己设置）

找到534行，你会发现有一行代码是这样的：

                //导航标签的位置
			    var $a = $("<a>")
				.addClass("tab")
				.data("page", tab.page)
				.css("margin-left", offset*TAB_OFFSET_WIDTH+"px")
				.css("margin-right", (maxOffset-offset)*TAB_OFFSET_WIDTH+"px")
				.click(function() {
				if (tab.page == pageNumRendering) goto(tab.page-1);
				else goto(tab.page)
			});

这个就是导航标签的位置也就是：

 $("#divShowPdf").pdf({
                source: "../" + Path,
                tabs: [
                { title: "第一页", page: 1, color: "orange" }
                ],
                loadingHTML: "正在加载文档,请稍等！",
                loadingHeight: 10
            });

这段代码的  tabs属性：这个数组里面就是写导航标签的一些参数，例如title:导航标签的标题，page：页码(需要导航到那一页)，color：也就是导航栏的颜色。

这时候,我们就可以改变导航标签的左右外边距的大小,来实现改变位置，也可以自己加一些新的css，或者js。

第三步，改变pdf的大小(通过css的transform属性设置scale(缩放的比例))

在583行左右，有这么一行代码：

	// Using promise to fetch the page
			pdfDoc.getPage(pageNumRendering).then(function(page) {
				var viewport = page.getViewport(options.pdfScale*options.quality);
				canvas.height = viewport.height;
				canvas.width = viewport.width;
			    //这个表示pdf的缩放大小,我们就直接在 scale("+(1/options.quality)+")")加上你要的缩放大小
				$(".pdf-canvas").css("transform", "scale("+(1/options.quality)+")").css("transform-origin", "top left");

我们找到    $(".pdf-canvas").css("transform", "scale("+(1/options.quality)+")").css("transform-origin", "top left");  这一句。

我们只需要在 scale("+(1/options.quality)+")")的1/options.quality后面加上你要缩放的大小就可以了，例如：

 $(".pdf-canvas").css("transform", "scale("+(1/options.quality+0.1)+")").css("transform-origin", "top left");

这样子，不过，我们不能给他加上1，2太大的数字，不然会非常大，我们只需要加0.几就可以满足需求了，具体多大还是要自己去试试。

好了，我们的touchPDF所显示的pdf大小就可以变大变小了。大家快去试试看吧！