本文以html + js为例，需自行下载pdfjs-dist插件 npm i pdfjs-dist@2.11.338
pdfjs-dist - npm
PDF.js - Examples
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用教程</title>
</head>
<body><div class="detail"><div id="pdf-container" style="width: 600px; height: 500px;"></div>
</div>
</body>
</html><script src="/js/pdfjs-dist/build/pdf.js"></script><script>
// xx.html?name=demo.pdf/* 获取地址栏中传递的字段 */function getQueryVariable(variable) {const query = window.location.search.substring(1);const vars = query.split('&');for (let i = 0; i < vars.length; i++) {const pair = vars[i].split('=');if (decodeURIComponent(pair[0]) === variable) {return decodeURIComponent(pair[1]);}}return null;}// 获取传递的 name 属性值let url = getQueryVariable('name');// 如果没有通过查询参数传递，尝试从 URL 的 hash 部分获取if (!url) {url = window.location.hash.slice(1);}// 如果仍然没有获取到，使用默认值或提示错误if (!url) {console.error('PDF URL not found.');}// 直接从这里CV就行let resUrl = `/tutorial/${url}`pdfjsLib.getDocument(resUrl).promise.then(function (pdf) {const numPages = pdf.numPages;const container = document.getElementById('pdf-container');for (let pageNumber = 1; pageNumber <= numPages; pageNumber++) {pdf.getPage(pageNumber).then(function (page) {const scale = 1.5;const viewport = page.getViewport({scale: scale});const canvas = document.createElement('canvas');canvas.className = 'pdf-page';canvas.width = viewport.width;canvas.height = viewport.height;const context = canvas.getContext('2d');const renderContext = {canvasContext: context,viewport: viewport};page.render(renderContext);container.appendChild(canvas);});}}).catch(function (error) {console.error('Error loading PDF:', error);});
</script><style>.detail {width: calc(100vw - 40px);height: 100vh;position: relative;}
</style>