JS-前端在dom中预览pdf等文件

1、将pdf等文件显示到dom元素中预览

  • pdf文件可以是blob、url、file类型等
  • 只要使用URL.createObjectURL(file)全部转为URL即可使用
  • 无需借助任何插件,只需要使用<object></object>标签即可实现

1.1、html

html 复制代码
<template>
  <div class="home">
    <object id="pdf-object" width="50%" height="500px"></object>
 
    <input type="file" id="pdf-file" />
    <button @click="showPDF">预览文件</button>
  </div>
</template>

1.2、js

js 复制代码
<script>

export default {
  name: 'HomeView',
  methods: {
    showPDF() {
      const inputElement = document.getElementById('pdf-file');
      const objectData = document.getElementById('pdf-object');

	  // 获取选择的文件
      const file = inputElement.files[0];
      // 转为url
      const url = URL.createObjectURL(file);
      // 给object标签赋值 相当于image标签的src属性
      objectData.data = url;
    }
  }
}
</script>

1.3、效果

1.4、注意

  • 如果不是这种file类型,而是后台返回的blob类型数据。
  • 那么在接收blob的时候,需要给构造函数传入第二个类型参数application/pdf,如下这样
  • 如果需要展示其他类型文件,只需修改相应type值即可。
  • word、excel、ppt等,不能直接展示,具体原因如下
相关推荐
FreeBuf_3 分钟前
微软365 PDF导出功能存在本地文件包含漏洞,可泄露敏感服务器数据
服务器·microsoft·pdf
千鼎数字孪生-可视化9 分钟前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月9 分钟前
7月10号总结 (1)
前端·css·css3
天天扭码32 分钟前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder35 分钟前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte40 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang44 分钟前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程
中微子2 小时前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z2 小时前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录2 小时前
虚拟DOM
前端·vue.js·dom