前端实现在线预览图片、word文档、excel表格、pdf文件等常用文件的方法，并给出实例

前端实现在线预览常用文件的方法有两种：

1. 使用第三方插件或工具，如 Google Docs、Office Online、PDF.js 等，这些工具可以将文件转化为网页格式进行在线预览。

2. 使用 HTML5 提供的文件预览功能，支持预览常用的图片、音频、视频和 PDF 等文件。

下面分别给出实现方法和示例代码：

1. 使用第三方插件或工具

Google Docs 示例：

<!-- 在 HTML 中嵌入 Google Docs 预览链接 -->
<iframe src="https://docs.google.com/gview?url=http://example.com/sample.docx&embedded=true"></iframe>

Office Online 示例：

<!-- 在 HTML 中嵌入 Office Online 预览链接 -->
<iframe src="https://view.officeapps.live.com/op/embed.aspx?src=http://example.com/sample.docx"></iframe>

PDF.js 示例：

<!-- 在 HTML 中嵌入 PDF.js 预览链接 -->
<iframe src="https://mozilla.github.io/pdf.js/web/viewer.html?file=http://example.com/sample.pdf"></iframe>

2. 使用 HTML5 提供的文件预览功能

图片预览示例：

<!-- 在 HTML 中嵌入图片预览 -->
<img src="http://example.com/sample.jpg" alt="Sample Image" />

音频预览示例：

<!-- 在 HTML 中嵌入音频预览 -->
<audio src="http://example.com/sample.mp3" controls></audio>

视频预览示例：

<!-- 在 HTML 中嵌入视频预览 -->
<video src="http://example.com/sample.mp4" controls></video>

PDF 文件预览示例：

<!-- 在 HTML 中嵌入 PDF 文件预览 -->
<embed src="http://example.com/sample.pdf" type="application/pdf" />

以上是常见文件在线预览的实现方法和示例代码，具体实现还需根据具体需求和技术栈来选择最适合的方案。