【vue && vue-pdf】解决pdf预览时的跨域问题

vue 使用vue-office预览word、excel,pdf同理 在此,我只使用了docx和excel, pdf我直接使用的iframe进行的展示就不作赘述了。 阅读详情
AI摘要

本文介绍了在Vue开发环境中遇到PDF预览跨域问题的解决方案。通过配置vue.config.js中的devServer代理,将PDF请求指向不同的服务器地址,从而避免跨域限制。在开发时添加代理 '/pdf',并确保在请求PDF文件路径前添加代理前缀 '/pdf',以实现本地预览。此方法在生成和测试环境则依赖后端处理跨域设置。

问题:

pdf预览引起跨域

当时出问题时没截图,现在的图从网络上截取的

和vue 接口请求解决跨域问题一样,在本地开发时同样通过 webpack的devServer去代理pdf预览的url(请求),其他环境(生成及测试)则让后端去解决。

解决开发环境pdf预览跨域问题就是在devServer中添加一个代理即可:

//vue.config.js
proxy: {
            //数据接口代理
            '/api': {
                target:'http://192.168.0.1:8080/api',
                changOrigin: true,  
                pathRewrite: {
                    '^/api': ''  
                }
            },
            //当pdf和数据接口不在同一个请求地址下时,为pdf预览追加一个代理
            '/pdf': {
                target: 'http://192.168.0.2/pdf/data',
                changOrigin: true,  
                pathRewrite: {
                    '^/pdf': ''  
                } 
            }
        }

 这时,后台返回的pdf的后缀比如为/aaaa/xxxx.pdf,请求时在该后缀前添加代理的/pdf前缀即可。

Vue项目中如何解决跨域的问题?跨域是什么?如何解决?解决方案都有哪些? 跨域问题通常发生在浏览器端,当你尝试从一个域名(比如)去请求另一个域名(如)上的资源时,浏览器会出于安全考虑,默认禁止这种跨域请求。这就是跨域问题的根本原因。跨域本质上是浏览器的同源策略(Same-Origin Policy)在起作用,它要求网页只能访问与其同一源(即相同协议、相同域名、相同端口)的资源。CORS:通过后端服务器配置响应头,允许跨域访问。代理:在开发环境中,通过 Vue CLI 或 Vite 配置代理服务器,将请求转发到目标服务器。JSONP:通过<script> 阅读详情

相关推荐

vue项目中使用pdf.js预览pdf文件

项目要求需要预览pdf文件,网上找了很久,大多数都是推荐pdf.js,自己先了解了一下,最后决定用pdf.js, 但是发现,在vue中使用这个很少!!!!!所以我就写这一篇帮助一下vue使用pdfjs的朋友! 其实 这和前端框架无关的,直接使用pdf.js原生 搜多了你就发现有几个封装pdf.js的vue组件,个人试验了其中一个,效果不是很好,所以,当然啊,用原生 的是最...

shentibeitaokong的博客 19万+

vue-pdf应用中跨域问题处理

vue-pdf应用中跨域问题处理

沙漠一只雕的博客 7219

vue-pdf 通过文件流预览pdf文件

用过vue-pdf的同志应该都知道,如果拿到的是一个pdf的在线链接在使用这个的时候会出现一个跨域问题。而后端不想去处理跨域情况,所以后面就考虑到使用文件流的形式去处理。 首先,下载vue-pdf npm install vue-pdf -D 其次,模板里面引入vue-pdf import pdf from 'vue-pdf' html: <pdf :src="src"></...

这是我的博客 1万+

处理vue-pdf 打包后使用cdn 报跨域问题

这个位置转换是不是字符串 导致的问题 但如果这里是字符串的话 又会导致打包的url问题的链接是字符串问题 导致打包失败所以将这个地方进行注释掉 在\config\index.js里面进行操作。修改这个路径下node_modules\_vue-pdf@4.2.0@vue-pdf\src\vuePdfNoSss.vue的文件 修改为。然后找到 build\webpack.base.conf.js。逻辑就是将require引用注释掉 改用import 引用。同时为了解决打包work,js的这个报错。

qq_31494485的博客 2409

vue里怎么使用pdf.js实现pdf文件的预览功能

你首先得准备一个pdf插件包,比如我这边的项目包里的public文件夹的lib文件夹下面就有一个pdf的插件包,里面包含build以及web两个文件夹。行,从而确定链接的参数file参数就是我们需要的pdf文件路径参数。其实实现这个预览代码量很少,核心代码就一行,接下来我介绍一下这个实现过程。比如我这边的写法就是下面的样子,这个就是预览的核心代码。我们打开viewer.js,有个默认的配置项。下载一个稳定版本的就行,目录大致如下。,直接访问浏览器就会下载该pdf。...

学习前端这门手艺,栈底到栈顶依次是:浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等 1万+

vue使用pdf.js预览pdf文件加水印,下载pdf文件

项目背景: vue-cli3脚手架 pdf.js版本为官方最新稳定版2.8.335 pdf.js下载地址:http://mozilla.github.io/pdf.js/getting_started/#download 根据自身需求去选择对应版本 开始使用 一、项目中放置pdf.js的包 在项目的public文件夹下,新建一个pdfjs文件夹,将下载下来的build和web文件夹丢进去,目录结构如下: vue-cli3下public文件夹中的内容不参与打包,打包生成的index.html直接可以访问到

- 4312

vue项目中预览pdf文件

一、利用浏览器自带的预览pdf // [pdfUrl] 获取pdf地址 eg:http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf <iframe ref="mainiframe" :src="pdfUrl" style="height:100%;width:100%" ></iframe...

prey1025的博客 5万+

详解Vue 开发模式下跨域问题

本篇文章主要介绍了Vue 开发模式下跨域问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

vue项目利用pdf.js预览pdf文件步骤及跨域问题

最近做项目遇到在线预览和下载pdf文件,试了多种pdf插件,例如vue-pdf(跨域以及分页会有很多问题) 最后选择了pdf.js插件(兼容ie10及以上、谷歌、安卓,苹果),强烈推荐该插件,以下介绍用法 1.首先去官网下载pdf插件,我这里用的是稳定版本 官网地址:http://mozilla.github.io/pdf.js/getting_started/#download 2.将整个文件...

qq_41621896的博客 1万+

别再只看读写速度了!聊聊手机闪存eMMC、UFS3.1和SSD背后的功耗与体积玄学

本文深入探讨手机闪存技术eMMC、UFS3.1和SSD在功耗与体积设计上的关键差异。通过对比接口技术、封装工艺和温度管理,揭示移动存储如何在有限空间内平衡性能与能效,为消费者提供选购参考。重点关注UFS3.1的差分信号设计和全双工架构带来的显著优势。

weixin_27061475的博客 449

单波束与多波束声呐:从原理到应用场景的全面解析

本文全面解析了单波束与多波束声呐的工作原理、核心特点及应用场景。单波束声呐如精准的狙击手,适合高精度需求;多波束声呐则像高效的散弹枪,适用于快速测绘和大面积覆盖。文章还提供了选型指南和前沿发展趋势,帮助用户根据预算和需求选择最适合的声呐技术。

weixin_30872157的博客 221

vue中运用vue-pdf实现pdf分页预览及缩放(可解决pdf预览不清晰问题)

vue中运用vue-pdf实现pdf分页预览及缩放(可解决pdf预览不清晰问题)

少点bug,多点bag。 2万+

在Ultralytics YOLO中添加/更换模块详细指南

使用参数继承 my_module_args: &my_args [64, 3, 0.5] # 定义参数模板 backbone: - [-1, 1, MyModule, *my_args] # 引用参数。

MR_Colorful的博客 2584

vue项目基于pdf.js简单在线pdf文件预览 SpringBoot 解决跨域问题,兼容移动端!

前段时间公司需要做一个PDF预览功能记录一下遇到的问题以及实现的过程 PDF.js 预览远程文件跨域问题 SpringBoot文件流消息头类型选择 远程文件资源地址 不属于自己的管辖的范围,无法通过修改服务端处理请求头来解决问题 话不多说开始了 1.PDF.js 下载 下载地址 http://mozilla.github.io/pdf.js/getting_started/#download...

don't be the same, be better 3114

MOS 管驱动设计细节,波形分析

一般认为MOSFET是电压驱动的,不需要驱动电流。然而,在MOS的G S两级之间有结电容存在,这个电容会让驱动MOS变的不那么简单。 如果不考虑纹波和EMI等要求的话,MOS管开关速度越快越好,因为开关时间越短,开关损耗越小,而在开关电源中开关损耗占总损耗的很大一部分,因此MOS管驱动电路的好坏直接决定了电源的效率。 对于一个MOS管,如果把GS之间的电压从0拉到管子的开启电压所用的时间越短,那么MOS管开启的速度就会越快。与此类似,如果把MOS管的GS电压从开启电压降到0V的时间越短,那么MOS管关断的

m0_50862404的博客 1万+

【CODESYS】-软件Bug与处理方法(20240710更)

【CODESYS】-软件Bug与处理方法(不定期更新)

qq_35316470的博客 5186

PDF.js的使用及其跨域问题解决

PDF.js 是一个由 Mozilla 开发的开源 JavaScript 库,用于在浏览器中显示 PDF 文件,无需插件支持。它可以将 PDF 文件解析为可在浏览器中渲染的页面,实现 PDF 文件的预览功能。

jxnd123456的博客 5476

交通银行金融科技后端开发实习生面试经验

笔试之路的第一个脚印。不足的地方:基本功不扎实,得补。先补sql(先整理出一篇sql语句做题的文章,争取下次笔试拿下这一块),编程题中的SQL写不出来感觉很丢人。然后补八股文,结合一些网上项目教程,来理解常用的一些八股文(比如各种锁)。

T__TSZ的博客 1731

vue项目中实现pdf文件预览功能

vue项目中实现pdf文件预览功能 最近遇到一个实现pdf文件预览功能的需求,分享一下实现方法: pdf预览相对word、excel、ppt等文件的预览比较容易,因为常见的浏览器都是支持pdf文件直接预览,所以最简单的实现方法就是在浏览器中直接输入pdf文件存放在服务器上的路径地址就可以直接预览; 1、使用浏览器默认支持访问pdf文件的功能 1.1、当后端返回的是pdf文件在服务器上的路径时,直接...

xm2by的博客 2万+

【学习系列】SAP RAP 2:创建第一个RAP应用

本文介绍了从零开始创建基于SAP RAP(ABAP RESTful Application Programming Model)的Fiori应用的完整流程。首先说明了学习RAP需要结合官方文档和教程,并提供了相关资源链接。文章详细讲解了开发环境的准备要求,包括系统版本、开发工具和基本知识。重点演示了如何通过8个步骤创建支持CRUD操作和草稿功能的RAP应用:1)创建数据库表;2)定义CDS视图实体;3)创建投影视图;4)定义行为;5)创建行为投影;6)定义服务;7)绑定服务;8)添加UI注解。

DeveloperMrMeng的博客 1502

Openclaw 错误分析 与 解决方案 之:Selected model is at capacity. Try a different model, or wait and retry.

Openclaw 错误分析 与 解决方案 :Selected model is at capacity. Try a different model, or wait and retry.

多媒体编程、网络编程、系统编程、网络安全编程、驱动编程 6422

vue 移动端app预览和保存pdf踩坑

使用Vue开发h5,嵌套到Android和IOS的Webview里,需要实现pdf预览和保存功能,预览pdf的功能,我这边使用了三个库,pdf5,pdf.js,vue.pdf,现在把这三个库在app端的坑分享一下。先说预览的,保存的实现等会再说。

jifashihan的博客 2920

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

vue-pdf插件的使用,并通过Java后端文件流的方式解决vue跨域问题

vue-pdf插件的使用,并通过Java后端文件流的方式解决vue跨域问题安装简单用法直接上代码-前端写法Java后端文件流的方式解决vue跨域问题导入 安装 npm install --save vue-pdf 简单用法 直接上代码-前端写法 <template> <div> <pdf :src="pdfUrl"> </pdf> </div> </template> <script> impo

qq_35575544的博客 1248

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目,保存在这里方便以后使用直接下载

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

Vue PDF文件预览vue-pdf

最近做项目,遇到预览PDF这个功能,在网上找了找,大多推荐的是pdf.js,不过在Vue中还是想偷懒直接npm组件,最后找到了一个还不错的Vue-pdf 组件,GitHub地址:https://github.com/FranckFreiburger/vue-pdf#readme 不过一般GitHub上的注释比较简洁,所以这里把自己实际使用的过程总结了一下,下面贴代码 引用: n...

weixin_33757609的博客 2万+

RU DOS版、EFI版32bit/64bit BIOS常用工具

DOS版、EFI版的RU工具,可用来查看IO、MEM、PCI、SMBIOS等资源。亲测在EFI SHELL下可用。

上一篇: 【vue && ant design vue】利用vue-draggable-resizable插件实现表格拖拽
下一篇: 【vue3.x】vue3.x基础知识学习
谭CV
博客等级 码龄9年 73粉丝 85原创
评论 10
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值