共计 1381 个字符，预计需要花费 4 分钟才能阅读完成。
需要 : 在线浏览 pdf 文档.
解题 : 拿到 pdf 文档后, 应用 pdf.js 库, 将其转换成 canvas, 不就可以看了吗.
思路 :
- 读取指定的 pdf 文档, 获取文档的总页数;
- 依据总页数, 创立对应数量的 canvas 元素, 并以 id 标识;
- 将每页内容渲染到对应 id 的 canvas 中;
代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 在线浏览 pdf 文档 </title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.13.216/pdf.min.js"></script>
</head>
<body>
<div id="myContainer"></div>
<script>
function loadPDF (url) {
// 思路:
// 读取指定的 pdf 文档, 获取文档的总页数
// 依据总页数, 创立对应数量的 canvas 元素, 并以 id 标识
// 将每页内容渲染到对应 id 的 canvas 中
pdfjsLib
.getDocument('./a.pdf')
.promise
.then(function(pdf) {
let num = pdf.numPages
const id_prefix = 'ok_'
createCanvas(num, id_prefix)
renderCanvas(pdf, num, id_prefix)
})
}
// 创立画布容器
function createCanvas (num, idPrefix) {const container = document.getElementById('myContainer')
for (let i = 1; i <= num; i++) {let canvas = document.createElement('canvas')
canvas.id = `${idPrefix}${i}`
container.appendChild(canvas)
}
}
// 将文档内容渲染到画布
function renderCanvas (pdf, num, idPrefix) {for (let i = 1; i <= num; i++) {
pdf
.getPage(i)
.then(function(page) {
var scale = 2
var viewport = page.getViewport({scale: scale,})
var canvas = document.getElementById(`${idPrefix}${i}`)
var context = canvas.getContext('2d')
canvas.height = viewport.height
canvas.width = viewport.width
var renderContext = {
canvasContext: context,
viewport: viewport
}
page.render(renderContext)
})
}
}
loadPDF('./a.pdf')
</script>
</body>
</html>
正文完
