1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > vue - - - - - 预览常见文件格式 .doc .docx .xls .xlsx .pdf

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

时间:2022-08-01 16:45:25

相关推荐

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

在线预览常见文件

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地址即可.pdf文件直接预览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】

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。