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

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

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

1.1、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

<script>export default {name: 'HomeView',methods: {showPDF() {const inputElement = document.getElementById('pdf-file');const objectData = document.getElementById('pdf-object');// 获取选择的文件const file = inputElement.files[0];// 转为urlconst url = URL.createObjectURL(file);// 给object标签赋值 相当于image标签的src属性objectData.data = url;}}
}
</script>

1.3、效果

在这里插入图片描述

1.4、注意

  • 如果不是这种file类型,而是后台返回的blob类型数据。
  • 那么在接收blob的时候,需要给构造函数传入第二个类型参数application/pdf,如下这样
    • 在这里插入图片描述
  • 如果需要展示其他类型文件,只需修改相应type值即可。
  • word、excel、ppt等,不能直接展示,具体原因如下
    • 在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/152506.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vc课堂发票

在这个页面 在控制台中执行&#xff1a; // 获取需要存储的元素值 var 销货单位名称 document.querySelector("body > section > div.table_middle > table > tbody > tr:nth-child(5) >td:nth-child(2) > ul > li:nth-child(1) > span"…

基于Springboot实现影视影院订票选座管理系统【项目源码+论文说明】

基于Springboot实现影视影院订票选座管理系统演示 摘要 本论文主要论述了如何使用JAVA语言开发一个影城管理系统 &#xff0c;本系统将严格按照软件开发流程进行各个阶段的工作&#xff0c;采用B/S架构&#xff0c;面向对象编程思想进行项目开发。在引言中&#xff0c;作者将论…

k8s-8 ingress-nginx

nodeport 默认端口 nodeport默认端口是30000-32767&#xff0c;超出会报错 添加如下参数&#xff0c;端口范围可以自定义 externalname ingress-nginx 通过一个外部的vip 地址 访问到集群内的多个service 一种全局的、为了代理不同后端 Service 而设置的负载均衡服务&…

掌动智能:性能压力测试的重要性

采用性能压力测试可以帮助企业预估系统容量、提升用户体验以及降低风险和成本。在软件开发过程中&#xff0c;将性能压力测试纳入测试策略的重要一环&#xff0c;将为企业的成功和用户满意度打下坚实的基础。 性能压力测试的重要性&#xff1a; 一、发现性能瓶颈 性能压力测试能…

FPGA实现HDMI输入转SDI视频输出,提供4套工程源码和技术支持

目录 1、前言免责声明 2、我目前已有的SDI编解码方案3、设计思路框架核模块解析设计框图IT6802解码芯片配置及采集ADV7611解码芯片配置及采集silicon9011解码芯片配置及采集纯verilog的HDMI 解码模块RGB888转YUV422SPMTE编码SDI模式图像缓存SPMTE SDIGTXGV8500 4、vivado工程1-…

排序算法——希尔排序

一、介绍: 希尔排序是一种可以减少插入排序中数据比较次数的排序算法&#xff0c;加速算法的进行&#xff0c;排序的原则是将数据区分为特定步长的小区块&#xff0c;然后以插入排序算法对小区块内部进行排序&#xff0c;经历过一轮排序则减少步长&#xff0c;直到所有数据都排…

超简单的视频截取方法,迅速提取所需片段!

“视频可以截取吗&#xff1f;用相机拍摄了一段视频&#xff0c;但是中途相机发生了故障&#xff0c;录进去了很多不需要的片段&#xff0c;现在想截取一部分视频出来&#xff0c;但是不知道方法&#xff0c;想问问广大的网友&#xff0c;知不知道视频截取的方法。” 无论是工…

国内就能使用的chatgpt网页版,包含AIGC应用工具

Chatgpt的出现在多个领域带来了重要的影响。它能够显著提高我们的工作效率&#xff0c;无论是编写文案代码还是回答常见问题&#xff0c;都能在短时间内完成任务。通过Chatgpt&#xff0c;我们能够迅速获取所需答案。随着人工智能技术的不断发展&#xff0c;相信在未来AI能够带…

交通物流模型 | MDRGCN:用于多模式交通客流预测的深度学习模型

城市交通拥堵是造成交通事故的重要原因,也是城市发展的主要障碍。通过学习历史交通流数据,我们可以预测未来一些区域的交通流,这对城市道路规划、交通管理、交通控制等都有重要意义。然而,由于交通网络拓扑结构的复杂性和影响交通流的因素的多样性,交通模式往往是复杂多变…

Linux系统中实现便捷运维管理和远程访问的1Panel部署方法

文章目录 前言1. Linux 安装1Panel2. 安装cpolar内网穿透3. 配置1Panel公网访问地址4. 公网远程访问1Panel管理界面5. 固定1Panel公网地址 前言 1Panel 是一个现代化、开源的 Linux 服务器运维管理面板。高效管理,通过 Web 端轻松管理 Linux 服务器&#xff0c;包括主机监控、…

利用KerasCV YOLOv8轻松实现目标精确检测

本文中将实现基于KerasCV YOLOv8的交通灯信号检测,并附录完整代码。。 自从You Only Look Once(简称 YOLO)的诞生以来,目标检测问题主要通过深度学习来解决。大多数深度学习架构通过巧妙地将目标检测问题构建为多个小分类问题和回归问题的组合来实现。具体而言,它是通过在…

ClickHouse进阶(二十二):clickhouse管理与运维-服务监控

进入正文前,感谢宝子们订阅专题、点赞、评论、收藏!关注IT贫道,获取高质量博客内容! 🏡个人主页:IT贫道_大数据OLAP体系技术栈,Apache Doris,Kerberos安全认证-CSDN博客 📌订阅:拥抱独家专题,你的订阅将点燃我的创作热情! 👍点赞:赞同优秀创作,你的点赞是对我创…

接口自动化测试详解,看完不会我退出测试界

一、自动化分类 &#xff08;1&#xff09;接口自动化 python/javarequestsunittest框架来实现 python/javaRF&#xff08;RobotFramework&#xff09;框架来实现——对于编程要求不高 &#xff08;2&#xff09;Web UI功能自动化 python/javaseleniumunittestddtPO框架来实…

桥梁安全在线监测预警系统解决方案

在我们的日常生活中&#xff0c;桥梁作为重要的交通枢纽&#xff0c;其安全性与稳定性至关重要。然而&#xff0c;桥梁由于其所处的特殊环境以及复杂的施工过程&#xff0c;往往容易受到各种因素的影响。最近频繁发生的桥梁施工事故引起了人们的广泛关注。这些事故的原因可能各…

有哪些适合初级程序员看的书籍?

1、《C Primer Plus》&#xff08;中文版名《C Primer Plus&#xff08;第五版&#xff09;》&#xff09; 作者&#xff1a;Stephen Prata 该书以C语言为例&#xff0c;详细介绍了编程语言的基础知识、控制结构、函数、指针、数组、字符串、结构体等重要概念。并且&#xff0…

KUKA机器人通过直接输入法设定负载数据和附加负载数据的具体操作

KUKA机器人通过直接输入法设定负载数据和附加负载数据的具体操作 设置背景色: 工具负载数据 工具负载的定义: 工具负载数据是指所有装在机器人法兰上的负载。它是另外装在机器人上并由机器人一起移动的质量。需要输入的值有质量、重心位置、质量转动惯量以及所属的主惯性轴。…

突发!该国教育部将MDPI、Hindawi和Frontiers三大出版商打包“拉黑”了!

最近&#xff0c;基于对学术诚信和作者署名的特别关切&#xff0c;马来西亚大学教育部发布了一项声明&#xff0c;禁止该国的公立大学使用政府预算来支付在MDPI、Hindawi和Frontiers三家学术出版商旗下的所有期刊上发表论文的费用。 马来西亚大学教育部还成立了一个特别委员会…

Java注解

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、在编译时进行格式检查&#xff08;JDK内置的三个基本注解&#xff09;二、使用步骤1.理解Annotation2.Annocation的使用示例3.如何自定义注解4.jdk 提供的4种元…

如何更好的使用结构化工艺文件编制软件?——青创智通

青创智通结构化工艺文件编制软件包括文件创建、文件编制、文件修改、文件复制、文件引用、标准文件库、工艺路线、工艺资源库管理、审批管理、文件导出、文件清单汇总、接口管理等功能。具有以下优势及亮点。 1.集中工艺数据管理 以PLM系统平台为核心的结构化工艺数据支撑平台…

Android 源码解析: SharedPreferences的解析

Android源码解析&#xff1a;SharedPreferences的解析 导言 SharedPreferences是Android中的一种轻量的数据持久化手段&#xff0c;可能也是我们在学习Android时接触到的第一种特殊的本地数据持久化手段&#xff0c;本篇文章就将从源码角度分析SharedPreferences的原理。 源…