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

这篇具有很好参考价值的文章主要介绍了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=
  • .ofd等类型文件,需要在预览地址之前拼接上https://ofd.xdocin.com/view?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">下载 PDF</a>
</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">下载 PDF</a>.</p>
</object>

4. 更多预览方式

【vue-pdf】

5. 代码示例

  <!-- 预览弹窗 -->
  <a-modal
    class="preview-modal"
    :class="[isImage ? '' :'preview-file']"
    v-model:visible="visible"
    title="预览"
    :width="isImage?'500px':'80%'"
    :afterClose="afterClose"
    :destroyOnClose="true"
    :footer="null"
  >
    <img v-if="isImage" :src="iframeSrc" alt />
    <embed v-else :src="iframeSrc" type="application/pdf" width="100%" height="100%" />
  </a-modal>


  <script>
    const imageFileType = " .png, .jpg, .jpeg"; // 图片格式,单独预览
    const microsoftFileType = " .doc, .docx, .xls, .xlsx"; // 微软文件格式,单独预览
  	 // 预览相关信息数据
    const annexConfig = reactive({
      updateData: {},
      headers: { Authorization: localStorage.getItem("token") },
      action: '',
      accept: "", // 需要支持的文件格式
      fileList: [], // 文件列表
      visible: false, // 是否预览
      isImage: false, // 是否为图片格式预览
      iframeSrc: "" // 预览地址
    });
    
    /**
     * 预览附件
     */
    const PreviewAnnex = file => {
      const previewName = file.name || file.fileName;
      let index = previewName.indexOf(".");
      const type = previewName.slice(index);
      const PREFIX = "https://view.officeapps.live.com/op/view.aspx?src="; // word、excel 等Microsoft办公文件预览之前需要先拼接上
      const OFDPREFIX = "https://ofd.xdocin.com/view?src="; // ofd文件预览前缀

      const previewPath = file.fileUrl;

      let path = "";
      if (imageFileType.includes(type)) {
        // 图片格式
        path = `${previewPath}`;
        annexConfig.isImage = true;
      } else if (microsoftFileType.includes(type)) {
        // 微软文件格式
        path = `${PREFIX}${encodeURIComponent(previewPath)}`;
        annexConfig.isImage = false;
      } else if (type == "ofd") {
        // ofd格式
        path = `${OFDPREFIX}${encodeURIComponent(previewPath)}`;
        annexConfig.isImage = false;
      } else {
        // pdf文件格式
        path = `${previewPath}`;
        annexConfig.isImage = false;
      }

      annexConfig.visible = true;
      annexConfig.iframeSrc = path;
    };
  </script>

6. 遇到的问题!!!!!!!!

在预览word和excel文件的时候,因为使用的是https://view.officeapps.live.com/op/view.aspx?src=文件地址这种方式。
这种方式可以预览的前提是:

  1. 文件地址外网可以访问
  2. 文件地址返回头的header是对应的文件格式!!!!!!!

vue - - - - - 在线预览常见文件格式 .doc, .docx, .xls, .xlsx,.pdf文章来源地址https://www.toymoban.com/news/detail-486458.html

到了这里,关于vue - - - - - 在线预览常见文件格式 .doc, .docx, .xls, .xlsx,.pdf的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue中支持txt,docx,xlsx,mp4格式文件预览(纯前端)

    在平常的工作当中,已经会遇到文件上传后需要预览的功能,比如docx,doc,xls,xlsx,ppt,pdf,txt,图片,视频等格式的文件,其实也可以让后端人员写接口解析,本着不想麻烦别人的心态,能自己解决的绝不麻烦别人,这里简单介绍txt,docx,xlsx,mp4文件预览。        1.在vue项目中安装a

    2024年02月06日
    浏览(46)
  • Python实现将pdf,docx,xls,doc,wps,zip,xlsx,ofd链接下载并将文件保存到本地

    前言 本文是该专栏的第31篇,后面会持续分享python的各种干货知识,值得关注。 在工作上,尤其是在处理爬虫项目中,会遇到这样的需求。访问某个网页或者在采集某个页面的时候,正文部分含有docx,或pdf,或xls,或doc,或wps,或ofd,或xlsx,或zip等链接。需要你使用python自

    2024年02月17日
    浏览(61)
  • vue 预览 有token验证的 doc、docx、pdf、xlsx、csv、图片 并下载

    预览 doc我也不会 下载

    2024年02月09日
    浏览(44)
  • 在Windows和MacOS环境下实现批量doc转docx,xls转xlsx

    Python中批量进行办公文档转化是常见的操作,在windows状态下我们可以利用changeOffice这个模块很快进行批量操作。 Windows环境下,如何把doc转化为docx,xls转化为xlsx? 首先,我们要安装这个第三方模块,在cmd下输入 其次,导入这个模块 然后,要确定文件所在的位置 最后就可以

    2024年02月13日
    浏览(35)
  • 前端vue3实现本地及在线文件预览(含pdf/txt/mp3/mp4/docx/xlsx/pptx)

    (一)微软office免费预览( 推荐 ) 支持doc/docx/xls/xlsx/ppt/pptx等多种office文件格式的免费预览 (二)XDOC文档预览云服务  移动端和PC端无插件预览PDF、OFD、Word、WPS等多种格式文档 本地或内网预览需要借助插件实现,pdf、mp3、mp4等主要靠原生标签或浏览器自带功能,尽量减少

    2024年02月05日
    浏览(71)
  • php怎么在线预览word文件?php预览.doc、.docx、.wps文件

    php预览Word PHP要实现在线Word预览只需要3步 第一步: 准备一个文件地址,如下: http://usdoc.cn/vw/文件模板.docx 第二步 预览前置地址: http://vw.usdoc.cn/?src= 第三步 开始预览 http://vw.usdoc.cn/?src=http://usdoc.cn/vw/文件模板.docx

    2024年02月08日
    浏览(54)
  • node简单处理xls、xlsx、docx文件

    最近想爬取一些excel和word文件中的数据,于是记录下来,方便自己后面复杂粘贴,xls、xlsx、docx文件还是能处理的,但是doc文件处理不了 使用cmd 在入口文件

    2024年02月15日
    浏览(36)
  • vue实战--vue+elementUI实现多文件上传+预览(word/PDF/图片/docx/doc/xlxs/txt)

        最近在做vue2.0+element UI的项目中遇到了一个需求:需求是多个文件上传的同时实现文件的在线预览功能。需求图如下:     看到这个需求的时候,小栗脑袋一炸。并不知道该如何下手,之前的实践项目中也并没有遇到相似的功能。因此也废了一番功夫想要实现这样一个

    2024年01月23日
    浏览(76)
  • python 读写 json,csv,txt,docx,xlsx,xls文件大全

    最近再处理数据的时候,总会用到读写json,csv,xlsx和xls文件代码 这里就做个总结记录一下 扩展: json.loads(line)和 json.load(line) 通用写法: 1.2.1 list类型写入 1.2.2 dict类型写入 注意:json.dump()将Python对象序列化为JSON格式,并将其写入文件中。 扩展:json.dumps()和 json.dump() 2.2.1

    2024年02月06日
    浏览(44)
  • Python实现将pdf,docx,xls,doc,wps链接下载并将文件保存到本地

    前言 本文是该专栏的第31篇,后面会持续分享python的各种干货知识,值得关注。 在工作上,尤其是在处理爬虫项目中,会遇到这样的需求。访问某个网页或者在采集某个页面的时候,正文部分含有docx,或pdf,或xls,或doc,或wps,或ofd,或xlsx,或zip等链接。需要你使用python自

    2024年02月16日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包