js实现pdf在线预览
使用PDF.js实现PDF在线预览
PDF.js是Mozilla开发的一个开源库，可以直接在浏览器中渲染PDF文件，无需任何插件。
安装PDF.js库
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>基本实现代码
// 设置PDF.js worker路径
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js';
// 加载PDF文档
const loadingTask = pdfjsLib.getDocument('yourfile.pdf');
loadingTask.promise.then(function(pdf) {
// 获取第一页
pdf.getPage(1).then(function(page) {
const scale = 1.5;
const viewport = page.getViewport({scale: scale});
// 准备canvas元素
const canvas = document.getElementById('pdf-canvas');
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
// 渲染PDF页面到canvas
const renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});使用iframe嵌入PDF预览
HTML5提供了原生支持PDF预览的方式，但浏览器兼容性有限。
<iframe
src="yourfile.pdf"
width="100%"
height="600px"
style="border: none;">
</iframe>使用第三方服务预览PDF
Google文档查看器提供了一种简单的PDF预览方案。
<iframe
src="https://docs.google.com/viewer?url=http://yourdomain.com/yourfile.pdf&embedded=true"
width="100%"
height="600px"
frameborder="0">
</iframe>使用浏览器原生PDF查看功能
现代浏览器大多支持直接打开PDF文件，可以通过简单的链接实现。
<a href="yourfile.pdf" target="_blank">查看PDF文件</a>注意事项
PDF.js提供了最灵活的解决方案，但需要处理跨域问题。当PDF文件位于不同域名时，服务器需要配置CORS头。
iframe方式简单但依赖浏览器支持，部分移动浏览器可能无法正常显示。
第三方服务如Google文档查看器需要网络连接，且文件会经过第三方服务器。
