js实现文档在线预览
实现文档在线预览的方法
使用PDF.js预览PDF文件
PDF.js是Mozilla开发的一个开源库，可以在浏览器中直接渲染PDF文件。通过以下代码可以实现在线预览：
// 引入PDF.js库
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
// 初始化PDF.js
pdfjsLib.getDocument('document.pdf').promise.then(function(pdf) {
pdf.getPage(1).then(function(page) {
var viewport = page.getViewport({ scale: 1.0 });
var canvas = document.getElementById('pdf-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
page.render({
canvasContext: context,
viewport: viewport
});
});
});使用Office Online预览Office文档
通过Microsoft Office Online的嵌入功能，可以在网页中预览Word、Excel等Office文档：
<iframe src="https://view.officeapps.live.com/op/embed.aspx?src=文档URL" width="100%" height="600px"></iframe>使用Google Docs Viewer预览文档
Google提供了文档预览服务，支持多种格式：
<iframe src="https://docs.google.com/viewer?url=文档URL&embedded=true" width="100%" height="600px"></iframe>使用纯前端库预览Markdown
对于Markdown文档，可以使用marked.js等库实现实时预览：
// 引入marked.js
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
// 转换Markdown为HTML
document.getElementById('preview').innerHTML = marked.parse(markdownContent);使用Viewer.js预览图片
Viewer.js是一个轻量级的图片查看库：
// 引入Viewer.js
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.10.1/viewer.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.10.1/viewer.min.js"></script>
// 初始化
const gallery = new Viewer(document.getElementById('images'));自定义实现文本文件预览
对于文本文件，可以直接读取并显示内容：
fetch('textfile.txt')
.then(response => response.text())
.then(text => {
document.getElementById('text-preview').textContent = text;
});注意事项
- 跨域问题：确保文档URL允许跨域访问
- 性能考虑：大文件需要分页加载或使用懒加载
- 安全性：对用户上传的文档进行严格校验
- 移动端适配：考虑不同设备的显示效果
以上方法可以根据具体需求选择使用，多数方案无需服务器端处理，完全在浏览器中实现文档预览功能。
