前端怎么预览pdf

1.背景

后台返回了一个在线的pdf地址,需要我这边去做一个pdf的预览(需求1),并且支持配置是否可以下载(需求2),需要在当前页就能预览(需求3)。之前我写过一篇预览pdf的文章,但是当时后台返回的是blob流文件,如果你们的pdf也是以流文件的形式返回的,可以看这篇文章(超链接点进去就行)。

2.简单说下pdf预览的实现方式

a.借助 <embed>  /  <iframe>标签

这个是真的很简单,我直接贴在下面了,缺点是: 没办法阻止用户打印和下载pdf,所以我pass了这个方案

<embed
 type="application/pdf"
 :src="pdfUrl"
 width="800"
 height="600" />
<iframe
 :src="pdfUrl"
 width="800"
 height="600" />

实现效果:
image.png

b.使用vue插件vue-pdf来渲染(应该还有一些其他的插件也可以使用,大家自己研究下实现的效果把)
这个方案我已经试了且用到项目上了,但是感觉很丑,跟浏览器打开pdf的效果差别很大,原因是这个插件大概得原理是把pdf转成了图片然后使用canvas来渲染的,然后很多东西都没有,就被我pass了。你可以想象一下你的pdf,然后你截图放进你网页上的感觉,就差不多是这个效果了,图片我忘记保存了,大家脑补一下
我找了个图,这个其实别人还做了一些其他的渲染,比如下面的也是他自己写的。我感觉是没这么好看的,所以就抛弃了这个
image.png
c.使用pdf.js预览
我觉得预览pdf这一块还是得用pdf.js,真的很成熟,样式也还是很给力的,然后想要改成什么样就可以改成什么样,因为源码在你手上。
缺点:稍微麻烦点,需要处理跨域的问题(但是如果你的网站、pdf文件所在位置,后台返回的pdf位置都在同一个域名下的话,就不需要处理)。且可能需要知道一点运维的知识,不然很可能你在本地能运行成功,但是到线上可能访问不到

3.使用pdf.js预览pdf

a.到官网去下载pdf.js

image.png
建议下第二个!!!(别问我为啥,因为我下了第一个来写demo发现有报错,又踩坑了)
image.png

b.解压之后直接丢到项目中的public文件夹下面去image.png
c.写一个pdf.vue文件,内容如下(注意我的路径,这个路径跟public的路径是一样的,前面加了一个/,原因如下:当我们使用npm run serve时,我们的本地电脑也会开启一个服务将public项目中的资源开发出来,此时跟服务器是一样的,你去访问:localhost:8080/pdf/web/viewer.html 是可以正常访问通的,这里不理解的话,就依葫芦画瓢吧,没关系的 ):
<template>
  <iframe :src="'/pdf/web/viewer.html?file='+pdfUrl"></iframe>
</template>
<script>

export default {
  name: 'Pdf',
  props: {
    pdfUrl: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped>
iframe {
  /* width: 960px; */
  width: 1100px;
  max-width: 100%;
  height: 800px;
  margin-left: 50%;
  transform: translateX(-50%);
}
</style>

d.在页面中导入使用:
<template>
  <div class="home">
    <div>这下面是我用来预览pdf文件的</div>
    <pdf :pdfUrl="pdfUrl"></pdf>
  </div>
</template>

<script>
import pdf from './pdf.vue';

export default {
  name: 'HomeView',
  components:{
    pdf
  },
  data() {
    return {
      pdfUrl:'http://localhost:8080/怎么删除wps中最后的空白页.pdf'
    }
  },
  created(){
    
  },
};
</script>

e.预览效果是这样子的

image.png

f.到源码中修改一下把打印和下载都去掉,这一步很简单,大家自己去弄了,也可以直接使用我的pdf文件,我这里都已经改好了。最后的效果如下:

image.png

4.难点处理

很大概率你在本地能跑通代码,但是到线上会出问题,可能会出现的问题我都罗列在下面了

a:线上404

线上404的话,说明你线上的这个pdf的资源没有上传到线上,或者线上写的路径不对!比如你的ip为192.168.1.182。如果正常的话,你去访问192.168.1.182/pdf/web/viewer.html 是可以正常访问通的。如果都没有出现正常的这个页面,如下:
image.png
那么说明你pdf文件资源没上传或者你写的路径不对。 1.检查dist包里面是否有这个pdf文件(一般放在public文件夹的都会原封不动的打到dist包中,这里还是需要检查下) 2.如果发现有的话,说明没问题,那么你需要到服务器上看下有没有这个pdf文件上传上去了没有。如果有的话,那就是你写的路径不对,或者是后台没有开发这个静态资源文件夹。此时如果你不懂的话,你就跟后台说下你要去访问这个页面,应该要用什么路径去访问才能访问的到。正常来说 192.168.1.182/pdf/web/viewer.html是可以的,如果不可以,可能是要加什么路径,比如192.168.1.182/web/pdf/web/viewer.html这种。如果你是web/pdf/web/viewer.html才能访问的到,那么你就要在你的pdf.vue里面改下路径以对应生产环境

b:线上显示资源跨域

这里是很明显从浏览器面板能看到的。这个的处理,需要你和后台一起处理,首先你访问/pdf/web/viewer.html这个的地址和你访问的页面的地址是需要在一个域名下的(如果不在的话,需要后台处理,开放个别域名),第二点,就是/pdf/web/viewer.html?file='+pdfUrl" 这个pdfUrl的地址最好也是跟你的pdf的viewer.html在同一个域名下,相当于三个都在同一域名下,就不会有跨域问题了。如果后台说是静态资源都放到另一台主机上了,那么麻烦他让他做个资源映射,保证你的pdfUrl是跟你的pdf的viewer.html在同一个域名下的

5.demo地址

demo地址可下载自己看代码:https://github.com/rui-rui-an/viewpdf
参考文章:https://juejin.cn/post/7207078219215732794?searchId=2024060423581130C1D707D73A6338E3BA#heading-14

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ant design的upload组件踩坑记录

antd版本 v4.17.0 1.自定义了onpreview和onchange事件&#xff0c;上传文件后&#xff0c;文件显示有preview的icon但是被禁用&#xff0c;无法调用onpreview事件。 问题展现&#xff1a; 苦苦查找原因&#xff0c;问题出在了这里&#xff0c;当文件没有url的时候&#xff0c…

基于FPGA的图像一维FFT变换IFFT逆变换verilog实现,包含tb测试文件和MATLAB辅助验证

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 fpga仿真结果 matlab调用FPGA的仿真结果进行图像显示 2.算法运行软件版本 vivado2019.2 matlab2022a 3.部分核心程序 ......................…

mac系统内存占用过高怎么办 优化电脑内存的方法系统加速

不少Mac用户都对mac系统内存占用过高非常头痛&#xff0c;不过这是mac在使用过程中一个很常见的问题&#xff0c;它会影响用户的操作体验&#xff0c;导致系统运行速度缓慢&#xff0c;甚至出现明显的卡顿现象。面对mac系统内存占用过高怎么办这个问题&#xff0c;其实很好解决…

C#操作MySQL从入门到精通(11)——对查询数据使用正则表达式过滤

前言 对于之前提到的使用匹配、比较、通配符等过滤方式能解决大部分的项目问题,但是有时候也会遇到一些比较复杂的过滤需求,这时候就需要正则表达式来实现了,正则表达式使用regexp这个关键字来实现。 本次测试的数据库表的内容如下: 1、基本字符匹配(包含某些字符) 匹…

git一次提交多个项目之windows

方案1:【快速】单个/多个项目提交到一个已有地址 步骤: 1,在git仓库,创建新的地址 2,在代码所在文件夹,编辑脚本 2.1,获得所有文件名:编写bat脚本,获得所有文件名称【非必须】; dir *.* /b/s>test.txt 获取所有文件之后,复制对应的文件名; 2.2,编写bat脚…

如何做好电子内窥镜的网络安全管理?

电子内窥镜作为一种常用的医疗器械&#xff0c;其网络安全管理对于保护患者隐私和医疗数据的安全至关重要。以下是一些基本原则和步骤&#xff0c;用于确保电子内窥镜的网络安全&#xff1a; 1. 数据加密 为了防止数据泄露&#xff0c;电子内窥镜在传输患者图像数据时应采取有…

嵌入式软件跳槽求指导?

嵌入式软件行业的跳槽确实需要一些特定的策略和技巧。我这里有一套嵌入式入门教程&#xff0c;不仅包含了详细的视频讲解&#xff0c;项目实战。如果你渴望学习嵌入式&#xff0c;不妨点个关注&#xff0c;给个评论222&#xff0c;私信22&#xff0c;我在后台发给你。 因为这个…

Sleep | 纺锤波-慢波耦合与解决问题的能力:年龄的影响

摘要 本研究考察了衰老如何影响睡眠在巩固新学习的认知策略中的作用。共纳入40名健康年轻人(20-35岁)和30名健康老年人(60-85岁)。参与者接受了河内塔(ToH)任务的训练&#xff0c;然后&#xff0c;每个年龄组的一半参与者被分配到90分钟的午睡条件下&#xff0c;另一半则保持清…

0605-JavaSE-单例模式-饿懒汉模式

​​​​​​​ 不能放在方法里面&#xff08;因为每个线程调用都会在方法里面实例化一个locker对象&#xff0c;但不属于同一个对象&#xff09;&#xff0c;然后要用static修饰成静态变量才会起到效果 //单例设计模式 //饿汉模式&#xff1a;在加载类的时候就已经开始创建 /…

极压抗磨剂属于润滑油添加剂 我国生产企业众多

极压抗磨剂属于润滑油添加剂 我国生产企业众多 常见润滑油添加剂包括极压抗磨剂、防腐防锈剂、抗氧剂、泡沫抑制剂、清净剂、分散剂等。极压抗磨剂指能够增强润滑油抗磨和极压性能的润滑油添加剂&#xff0c;具有耐腐蚀、粘附力强、耐热等优势&#xff0c;在航空航天、汽车制造…

王道408数据结构CH2_线性表

概述 2 线性表 2.1 基本操作 2.2 顺序表示 线性表的元素从1开始&#xff0c;数组元素下标从0开始 2.2.1 结构体定义 #define Maxsize 50typedef struct{ElemType data[Maxsize];int length; }SqList;#define Initsize 100typedef struct{ElemType *data;int Maxsize ,length;…

DVWA-CSRF

CSRF Low 观察后端代码&#xff0c;只要password_new等于password_conf就可以修改密码。由于这两个参数是通过GET传递的&#xff0c;所以直接构造payload。 http://192.168.20.156/DVWA/vulnerabilities/csrf/?password_newpass&password_confpass&ChangeChange# 这…

PDF批量加水印 与 去除水印实践

本文主要目标是尝试去除水印&#xff0c;但是为了准备测试数据&#xff0c;我们需要先准备好有水印的pdf测试文件。 注意&#xff1a;本文的去水印只针对文字悬浮图片悬浮两种特殊情况&#xff0c;即使是这两种情况也不代表一定都可以去除水印。 文章目录 批量添加透明图片水印…

[行业原型] 汽车供应链多地分销一站式云端解决方案

互联网改变了企业经营模式、竞争环境&#xff0c;同时还在改变企业的交易方式&#xff0c;影响着企业间的协作。 全球化电子商务环境下&#xff0c;传统的供应链管理模式不能适应新环境下供应链管理要求&#xff0c;新的供应链管理模式—eSCM。 eSCM是将分销管理、客户资源管理…

网络工程从头做-1

网络工程从头做-1 自下而上&#xff0c;从接入交换机开始网络的配置和规划 实验拓扑&#xff1a; 实验步骤&#xff1a; 1.完成基本配置 1.1 PC端IP地址信息配置略 1.2 接入层交换机S1配置 [Huawei]sys S1 [S1]undo in [S1]vlan b 10 20 [S1]int e0/0/1 [S1-Ethernet0/0/1]p l…

免费,C++蓝桥杯等级考试真题--第7级(含答案解析和代码)

C蓝桥杯等级考试真题--第7级 答案&#xff1a;D 解析&#xff1a;步骤如下&#xff1a; 首先&#xff0c;--a 操作会使 a 的值减1&#xff0c;因此 a 变为 3。判断 a > b 即 3 > 3&#xff0c;此时表达式为假&#xff0c;因为 --a 后 a 并不大于 b。因此&#xff0c;程…

Java——包装类、泛型简介

一、包装类 在Java中&#xff0c;由于基本类型不是继承自Object&#xff0c;为了在泛型代码中可以支持基本类型&#xff0c;Java给每个基本类型都对应了一个包装类型 1.1 基本数据类型和对应的包装类 基本数据类型包装类byteByteshortShortintIntegerlongLongfloatFloatdoub…

[图解]企业应用架构模式2024新译本讲解09-领域模型2

1 00:00:01,750 --> 00:00:03,030 代码还是一样的 2 00:00:03,040 --> 00:00:12,640 我们还是从前面人家做的复刻案例来看 3 00:00:14,170 --> 00:00:15,200 这个是它的类图 4 00:00:15,640 --> 00:00:20,650 我们同样用UModel逆转&#xff0c;这个太小了&#…

博物馆文物库房管理软件

博物馆作为文化遗产的守护者和传承者&#xff0c;承载着人类智慧与文明的结晶。在博物馆的背后&#xff0c;一个庞大而严密的管理系统支撑着文物的保护与展示。而其中&#xff0c;文物库房管理软件的使用&#xff0c;无疑是一项重要的管理工具。 文物库房管理软件的功能具有多样…

EDA数据跨网交换解决方案,一文了解

EDA数据通常与电子设计自动化相关&#xff0c;这是一种利用计算机辅助设计&#xff08;CAD&#xff09;软件来完成超大规模集成电路&#xff08;VLSI&#xff09;芯片的功能设计、综合、验证、物理设计等流程的技术。以下是一些会涉及到EDA数据的行业&#xff1a; 集成电路设计…