html中非插件实现pdf预览【PC+H5】

news/2024/10/18 9:17:10/

这里只考虑非插件以外的方法,插件可以参考pdf.js

1. iframe标签

<iframe src="/file/read?file=aaa&type=upload" width="100%" height="800px"></iframe>

经测试,chrome正常显示,firefox不能显示,H5不能显示。

2. object标签

<object data="/file/read?file=aaa&type=upload" type="application/pdf" width="100%" height="450"><a class="pdfdownload" target="_blank" href="/file/download?file=aaa&type=upload">点击查看场景详情介绍</a>
</object>
<!-- 或者这样
<object data="/file/read?file=aaa&type=upload" type="application/pdf" width="100%" height="450"><embed src="/file/read?file=aa&type=upload" type="application/pdf" height="460" width="100%">
</object>
-->

data 属性指定 PDF 文件的路径,type 属性标识文件类型为 PDF。如果未显示 object 元素,就会执行位于 和 之间的代码。因此,当浏览器无法加载该object标签时,用户就可以通过a标签提供的链接下载文件。
经测试,chrome正常显示,firefox不能显示,H5不能显示。

3. embed标签

<embed src="/file/read?file=aa&type=upload" type="application/pdf" height="460" width="100%">

经测试,chrome正常显示,firefox正常显示,H5可以显示【但尚未真机测验过】。

4.a标签点击预览pdf

//该接口1 后端设置Content-Disposition为attachment
<a target="_blank" href="/file/download?file=aaa&type=upload">点击查看场景详情介绍</a>
//该接口2 后端没有特别设置Content-Disposition
<a target="_blank" href="/file/read?file=aaa&type=upload">点击查看场景详情介绍</a>

对于接口1,经真机测验,在H5移动端中,部分浏览器,如chrome、safari、firefox可以实现点击a标签预览pdf文件;但部分浏览器,如qq浏览器、微信内置浏览器会弹出下载pdf文件的提示。
但在pc中则均默认为下载pdf。

原因
1.h5部分浏览器可以实现pdf预览,部分浏览器则弹窗提示下载,可能的原因是前者这些浏览器中内置了pdf预览插件
2.pc中均默认为下载,与请求头中的Content-Disposition有关。

content-type 指示响应内容的格式。

content-disposition 指示如何处理响应内容。

根据请求的路径不同,后端给请求头的Content-Disposition设置了不同的值,当值为attachment时,表示将响应内容作为附件下载;为inline时【默认值】,表示它可以显示在网页内,或作为网页,此时浏览器会自动进行预览。


http://www.ppmy.cn/news/998187.html

相关文章

HBase概述

HBase 一 HBase简介与环境部署 1.1 HBase简介&在Hadoop生态中的地位 1.1.1 什么是HBase HBase是一个分布式的、面向列的开源数据库HBase是Google BigTable的开源实现HBase不同于一般的关系数据库, 适合非结构化数据存储 1.1.2 BigTable BigTable是Google设计的分布式…

EPICS通道访问练习2--ca_array_get_callback的使用

编写以下程序的目的是测试ca_array_get_callback通道访问库函数的用法以及如何传递用户参数给与之设置的回调函数。 1&#xff09; struct ca_connection_handler结构体在连接状态变化时作为参数传递给设定的回调函数&#xff1b;caCh是回调函数的原型&#xff0c;即在定义连接…

使用Qt中的QDir类进行目录操作

文章目录 概述QDir类的基本功能获取当前目录创建目录列出目录内容筛选目录内容筛选特定命名文件 复制文件和目录删除文件和目录 应用场景总结 概述 Qt是一个跨平台的C应用程序开发框架&#xff0c;其中提供了许多方便的类来处理文件和目录操作。其中&#xff0c;QDir类是用于处…

在使用Python爬虫时遇到解析错误解决办法汇总

在进行Python爬虫任务时&#xff0c;遇到解析错误是常见的问题之一。解析错误可能是由于网页结构变化、编码问题、XPath选择器错误等原因导致的。为了帮助您解决这个问题&#xff0c;本文将提供一些实用的解决办法&#xff0c;并给出相关的代码示例&#xff0c;希望对您的爬虫任…

Oracle也有回收站

在数据库管理中&#xff0c;数据的删除是一个常见的操作。然而&#xff0c;有时候我们可能会意外地删除了一些重要的数据。幸运的是&#xff0c;Oracle数据库提供了一个类似于回收站的功能&#xff0c;可以帮助我们恢复被删除的数据。本文将介绍Oracle数据库中的回收站功能以及…

快速转换PDF文件: Python和PyMuPDF教程

解决问题 有时候将文档上传Claude2做分析&#xff0c;有大小限制&#xff0c;所以需要切割pdf文档为几个小点的文档&#xff0c;故才有了本文章。 如何用Python和PyMuPDF制作你想要大小的PDF&#xff1f; PDF是一种广泛使用的文件格式&#xff0c;可以在任何设备上查看和打印…

【雕爷学编程】Arduino动手做(179)---超低成本,尝试五十元的麦克纳姆轮小车 2

【花雕动手做】超低成本&#xff0c;尝试做个五十元的麦克纳姆轮小车&#xff01; 实验接线方法&#xff1a; MX1508模块 Ardunio Uno GND---------GND接地线 VCC---------5V 接电源 IN1---------D6 IN2 ------- D7 IN3---------D8 IN4 ------- D9 IN1---------D10 IN2 -------…

第十三章 利用PCA简化数据

文章目录 第十三章 利用PCA简化数据13.1降维技术13.2PCA13.2.1移动坐标轴 13.2.2在NumPy中实现PCA13.3利用PCA对半导体制造数据降维 第十三章 利用PCA简化数据 PCA&#xff08;Principal Component Analysis&#xff0c;主成分分析&#xff09;是一种常用的降维技术&#xff0…