目录
【前端动手玩创意】等待的转圈圈效果 (1)
【前端动手玩创意】google五星评分的星星(2)
【前端动手玩创意】CSS-3D卡片翻转效果(3) (今天难度颇高，想挑战再进来！)
【前端动手玩创意】一句CSS做出好看的hero section！(4)
【前端动手玩创意】创造一个Skill bar(5)
【前端动手玩创意】遮蔽广告(D卡未登入)脚本、自定义新增名单(6)
【前端动手玩创意】前端canvas截图的招式！竟然有三招，可存成SVG或PNG (7)
【前端动手玩创意】让你的PDF档案更难被抓取(8)
【前端动手玩创意】哇操！你敢信？花式写todo-list，body里面一行都没有也能搞？(9)
【前端动手玩创意】卡片製作，才不是！是卡片製作器！(10)
<!DOCTYPE html><html><head> <title>PDF Viewer</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script></head><body> <input type="file" id="pdf-file"> <div id="pdf-viewer"></div> <script> const fileInput = document.getElementById('pdf-file'); const pdfViewer = document.getElementById('pdf-viewer'); fileInput.addEventListener('change', function() { const file = fileInput.files[0]; // Load the PDF file using pdf.js library const fileReader = new FileReader(); fileReader.onload = function() { const typedarray = new Uint8Array(this.result); pdfjsLib.getDocument(typedarray).promise.then(function(pdf) { // Get the first page of the PDF and render it pdf.getPage(15).then(function(page) { const canvas = document.createElement('canvas'); const viewport = page.getViewport({scale: 1}); const context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; page.render({canvasContext: context, viewport: viewport}).promise.then(function() { pdfViewer.appendChild(canvas); }); }); }); }; fileReader.readAsArrayBuffer(file); }); </script></body></html>
用户投稿
微信扫一扫打赏
支付宝扫一扫打赏
