js实现文档在线预览
实现文档在线预览的JavaScript方法
文档在线预览可通过浏览器原生支持或第三方库实现，具体方法如下：
使用浏览器原生能力（PDF预览）
现代浏览器支持直接预览PDF文件，可通过<embed>或<iframe>标签实现：
<iframe
src="document.pdf"
width="100%"
height="600px"
style="border: none;">
</iframe>限制：仅支持PDF格式，且依赖浏览器兼容性。
使用第三方库（多种格式支持）
PDF.js（Mozilla开源库）
适用于PDF文件的渲染控制：
// 初始化PDF.js
pdfjsLib.getDocument('document.pdf').promise.then(function(pdf) {
pdf.getPage(1).then(function(page) {
const viewport = page.getViewport({ scale: 1.0 });
const canvas = document.getElementById('pdf-canvas');
canvas.height = viewport.height;
canvas.width = viewport.width;
page.render({
canvasContext: canvas.getContext('2d'),
viewport: viewport
});
});
});Office文件预览
使用微软官方Office Online嵌入代码：
<iframe
src="https://view.officeapps.live.com/op/embed.aspx?src=文档URL"
width="100%"
height="600px"
frameborder="0">
</iframe>通用文档转换方案
- 后端将文档转换为PDF/图片后前端渲染
- 使用
mammoth.js解析DOCX为HTML：mammoth.extractRawText({arrayBuffer: docxFile}) .then(function(result) { document.getElementById('output').innerHTML = result.value; });
云服务API方案
Google Docs Viewer（已废弃，可参考替代方案）
<iframe
src="https://docs.google.com/viewer?url=文档URL&embedded=true"
style="width:100%; height:600px;">
</iframe>商用API（如GroupDocs、Apryse）
需注册获取API Key后调用对应SDK。
注意事项
- 跨域问题需配置服务器CORS策略
- 大文件建议分片加载
- 敏感文档应配合权限控制
- 移动端需测试响应式布局
可根据具体需求选择合适方案，混合使用多种技术可覆盖更全面的格式支持。
