当我们用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大小就可以变大变小了。大家快去试试看吧!