首页用js写一个移动端预览"https://wjdy.e-proguard.com/db/protocolfo/61/72/57c6/3a4f/c707/7ca3/2acc/8b82/bd65/public/agreement/劳务协议模板.pdf"pdf文件的示例

用js写一个移动端预览"https://wjdy.e-proguard.com/db/protocolfo/61/72/57c6/3a4f/c707/7ca3/2acc/8b82/bd65/public/agreement/劳务协议模板.pdf"pdf文件的示例

时间: 2023-12-02 13:43:09 浏览: 81

spring 异步编程样例

以下是使用PDF.js库在移动端预览PDF文件的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>PDF.js Viewer</title> <style> #viewerContainer { position: absolute; top: 0; left: 0; right: 0; bottom 0; overflow: auto; } </style> </head> <body> <div id="viewerContainer"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"></script> <script> // 获取PDF文件的URL const pdfUrl = 'https://wjdy.e-proguard.com/db/protocolfo/61/72/57c6/3a4f/c707/7ca3/2acc/8b82/bd65/public/agreement/劳务协议模板.pdf'; // 获取容器元素 const container = document.getElementById('viewerContainer'); // 加载PDF文件 pdfjsLib.getDocument(pdfUrl).promise.then(pdf => { // 获取第一页 pdf.getPage(1).then(page => { // 计算缩放比例 const viewport = page.getViewport({ scale: 1 }); const scale = container.clientWidth / viewport.width; // 设置缩放比例 const scaledViewport = page.getViewport({ scale }); const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); canvas.height = scaledViewport.height; canvas.width = scaledViewport.width; // 渲染页面 page.render({ canvasContext: context, viewport: scaledViewport }).promise.then(() => { container.appendChild(canvas); }); }); }); </script> </body> </html> ```

阅读全文