关于实战:实战在线浏览pdf文档
需要:在线浏览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>