jspdf库实现目录跳转到第三页的底部
时间: 2024-02-18 15:02:01 浏览: 38
要实现目录跳转到第三页的底部,可以按照以下步骤进行:
1. 在生成第三页内容的时候,记录下当前页面的高度 `pageHeight`,例如:
```javascript
var pageHeight = doc.internal.pageSize.getHeight();
doc.text('这里是第三页内容', 20, 20);
// 记录下当前页面高度
var currentHeight = doc.internal.pageSize.getHeight() - pageHeight;
```
2. 在生成目录条目时,指定目标页码和垂直偏移量。偏移量为当前页面高度减去底部边距 `doc.internal.pageSize.bottomMargin`,例如:
```javascript
var toc = [
{ title: '第一页', pageNum: 1 },
{ title: '第二页', pageNum: 2 },
// 指定目标页码为 3,偏移量为当前页面高度减去底部边距
{ title: '第三页底部', pageNum: 3, y: currentHeight - doc.internal.pageSize.bottomMargin }
];
// 生成目录
var startY = 50;
for (var i = 0; i < toc.length; i++) {
var item = toc[i];
doc.text(item.title, 20, startY);
// 设置目标页码和垂直偏移量
doc.setPage(item.pageNum);
doc.setDisplayMode({ zoom: 'fullpage', layout: 'continuous', page: item.pageNum }, item.y);
startY += 10;
}
```
这样生成的目录条目就可以跳转到第三页的底部了。注意,`setDisplayMode` 方法的第二个参数为垂直偏移量,需要根据实际情况进行调整。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)