在线预览常见文件
1.HTML5 - ```embed```标签1.1 注意⚠️1.2 使用方式 2. HTML - ```iframe```标签2.1 注意⚠️2.2 使用方式 3. HTML - ```object```3.1 注意⚠️3.2 使用方式 4. 更多预览方式关于一些文件的在线预览,最简易的实现方式是什么呢?
写在前面
.png, .jpg, .jpeg
等图片格式直接预览http/https地址
即可直接预览http/https地址
即可.doc, .docx, .xls, .xlsx
等类型文件,需要在预览地址之前拼接上https://view./op/view.aspx?src=
1.HTML5 -embed
标签
1.1 注意⚠️
embed
标签定义嵌入的内容,这个标签是自闭合
的,也就是说如果浏览器不支持PDF的嵌入,那么这个标签的内容什么都看不到。
1.2 使用方式
【HTMLembed
标签】
<embed :src="iframeSrc" width="100%" height="100%" />
2. HTML -iframe
标签
2.1 注意⚠️
iframe
方法是嵌入PDF的最简单方法之一。但是,如果iframe
浏览器不支持PDF呈现,则可能无法提供足够的后备内容
2.2 使用方式
【HTMLiframe
标签】
<iframe :src="iframeSrc" width="100%" height="100%">该浏览器无法支持PDF,请点击查看:<a :href="iframeSrc">下载 PDF</a></iframe>
3. HTML -object
3.1 注意⚠️
与embed
不同,object
如果浏览器不支持PDF嵌入,则该元素可提示内容。所有浏览器都支持object
元素,但是,每个浏览器中的实现方式通常存在差异。如果您使用该object
元素,请务必在浏览器和操作系统中彻底测试您的页面。
3.2 使用方式
【HTMLobject
标签】
<object :data="iframeSrc" type="application/pdf" width="100%" height="100%">该浏览器不支持PDF.请点击查看:<a :href="iframeSrc">下载 PDF</a>.</p></object>
4. 更多预览方式
【vue-pdf】