pdf.js初始化时显示指定页，显示默认页

最新推荐文章于 2024-11-13 11:00:37 发布

unique_Lee

最新推荐文章于 2024-11-13 11:00:37 发布

阅读量6.4k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_20473985/article/details/86576306

javascript 专栏收录该内容

20 篇文章

订阅专栏

本文解决PDF.js中预览PDF后保留页面位置的问题，提供禁用此功能及跳转至指定页的方法，涉及localStorage操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用pdf.js时，遇到一个问题，预览pdf之后，比如现在在第8页，等再次打开的时候还是在第八页，需要从第一页加载；或者可能有需求直接跳转到某一页，查了些资料发现提供的方案很多，一个好使的都没有，也有可能是我使用不当，反正都是以失败告终。最开始决定直接去读代码，通过源代码来解决这个问题，但是代码量有点大啊，只能另寻他法，后来发现关闭浏览器的时候，重新打开pdf还是从离开的页码加载，所以推测默认的配置应该时保存在localStorage，果然在view.js中发现了设置，localStorage.setItem('pdfjs.history', databaseStr)。

打印了一下存储的内容如下：

{"files":[{"fingerprint":"57f1f29cbad323c87a7921391211253d","sidebarView":0,"page":4,"zoom":"auto","scrollLeft":-17,"scrollTop":752,"rotation":0}]}

ok，现在开始解决问题。

1.展示首页

如果你想每次打开的时候都展示pdf的首页，那么直接注释view.js中的localStorage.setItem('pdfjs.history', databaseStr)即可。

2.跳转指定页

如果你想加载不同的页码，可直接在view.html中增加以下代码：

if(localStorage.getItem('pdfjs.history')){
    if(typeof JSON.parse(localStorage.getItem('pdfjs.history')) === 'object' ){
	    var history = JSON.parse(localStorage.getItem('pdfjs.history'));
		if(history.files && history.files[0]){
            // 跳转指定页码
           this.database.files[0].page = 6;
        }
	    localStorage.setItem('pdfjs.history',JSON.stringify(history));
    }
}