vue - - - - - 在线预览常见文件格式 .doc, .docx, .xls, .xlsx,.pdf

关于一些文件的在线预览，最简易的实现方式是什么呢？

写在前面

• .png, .jpg, .jpeg等图片格式 直接预览http/https地址即可
• .pdf文件直接预览http/https地址即可
• .doc, .docx, .xls, .xlsx等类型文件，需要在预览地址之前拼接上https://view.officeapps.live.com/op/view.aspx?src=

1.HTML5 - embed标签

1.1 注意⚠️

embed标签定义嵌入的内容，这个标签是自闭合的，也就是说如果浏览器不支持PDF的嵌入，那么这个标签的内容什么都看不到。

1.2 使用方式

【HTML embed标签】

属性	值	描述
height	pixels	规定嵌入内容的高度。
width	pixels	规定嵌入内容的宽度。
src	URL	规定被嵌入内容的 URL。
type	MIME_type	规定嵌入内容的 MIME 类型。注：MIME = Multipurpose Internet Mail Extensions。

<embed :src="iframeSrc" width="100%" height="100%" />

---

2. HTML - iframe标签

2.1 注意⚠️

iframe方法是嵌入PDF的最简单方法之一。但是，如果iframe浏览器不支持PDF呈现，则可能无法提供足够的后备内容

2.2 使用方式

【HTML iframe标签】

<iframe :src="iframeSrc" width="100%" height="100%">
　　该浏览器无法支持PDF，请点击查看：
　　<a :href="iframeSrc">下载 PDFa>
iframe>

---

3. HTML - object

3.1 注意⚠️

与embed不同，object如果浏览器不支持PDF嵌入，则该元素可提示内容。所有浏览器都支持object元素，但是，每个浏览器中的实现方式通常存在差异。如果您使用该object元素，请务必在浏览器和操作系统中彻底测试您的页面。

3.2 使用方式

【HTML object标签】

<object :data="iframeSrc" type="application/pdf" width="100%" height="100%">
    该浏览器不支持PDF.请点击查看:
    <a :href="iframeSrc">下载 PDFa>.p>
object>

4. 更多预览方式

【vue-pdf】