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>

通用文档转换方案

1. 后端将文档转换为PDF/图片后前端渲染
2. 使用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策略
• 大文件建议分片加载
• 敏感文档应配合权限控制
• 移动端需测试响应式布局

可根据具体需求选择合适方案，混合使用多种技术可覆盖更全面的格式支持。