前端word和pdf预览代码
时间: 2023-10-13 15:05:41 浏览: 137
你可以使用第三方库来实现 Word 和 PDF 文件的预览,比如:
1. Google Docs Viewer
Google Docs Viewer 可以预览 Word、PDF、PPT、TXT 等多种文档格式,你可以将文档的 URL 传递给 Google Docs Viewer,然后显示在一个 iframe 中。
```
<iframe src="https://docs.google.com/gview?url=http://example.com/document.doc&embedded=true"></iframe>
```
2. PDF.js
PDF.js 是一个由 Mozilla 开发的开源 JavaScript 库,用于在浏览器中渲染 PDF 文件。你可以使用下面的代码来预览 PDF 文件。
```
<!DOCTYPE html>
<html>
<head>
<title>PDF.js Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"></script>
</head>
<body>
<canvas id="pdfCanvas"></canvas>
<script>
var pdfCanvas = document.getElementById("pdfCanvas");
var pdfURL = "http://example.com/document.pdf";
pdfjsLib.getDocument(pdfURL).promise.then(function(pdf) {
return pdf.getPage(1);
}).then(function(page) {
var viewport = page.getViewport({scale: 1});
pdfCanvas.width = viewport.width;
pdfCanvas.height = viewport.height;
page.render({
canvasContext: pdfCanvas.getContext("2d"),
viewport: viewport
});
});
</script>
</body>
</html>
```
3. Office Online
如果你有 Microsoft Office 365 订阅,你可以使用 Office Online 来预览 Word 和 Excel 文件。你需要将文档的 URL 传递给 Office Online,然后显示在一个 iframe 中。
```
<iframe src="https://view.officeapps.live.com/op/embed.aspx?src=http://example.com/document.docx"></iframe>
```
阅读全文