前端展示本地pdf文件部署

前端显示本地PDF文件通常涉及到HTML、CSS以及JavaScript的结合使用，特别是利用浏览器支持的一些API。以下是一个基本的步骤：

1. 使用File API: 当用户选择本地PDF文件后，通过`input[type="file"]`元素获取文件，然后读取文件内容。例如，你可以使用`FileReader`对象的`readAsDataURL()`方法将PDF转换为数据URL。

<input type="file" id="select-pdf" accept=".pdf">
<script>
const fileInput = document.getElementById('select-pdf');
fileInput.addEventListener('change', (e) => {
    const file = e.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = function(e) {
        displayPdf(e.target.result);
    };
    reader.readAsDataURL(file);
});
function displayPdf(dataUrl) {
    // 创建一个隐藏的img标签，并设置src属性
    const img = document.createElement('img');
    img.src = dataUrl;
    img.style.display = 'none';
    document.body.appendChild(img); // 将图片添加到文档中
}
</script>

2. 使用第三方库：有一些JavaScript库如PDF.js可以直接在浏览器中渲染PDF，它提供了一个完整的PDF查看器，可以处理本地或远程的PDF文件。

<script src="path/to/pdfjs-dist/build/pdf.js"></script>
...
<canvas></canvas>
<script>
const canvas = document.querySelector('canvas');
const url = URL.createObjectURL(new Blob([your_pdf_data])); // 替换成你的PDF数据
PDFJS.getDocument(url).promise.then(pdf => {
    pdf.getPage(1).then(page => {
        pdf.renderPage(page, { canvasContext: canvas.getContext('2d') });
    });
});
</script>