vue--后端接口返回pdf的url通过iframe预览

最新推荐文章于 2024-01-26 10:10:15 发布
最新推荐文章于 2024-01-26 10:10:15 发布
阅读量1.1k 收藏 2
点赞数
分类专栏： 移动端 vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38673922/article/details/118525217
版权

一、vue代码

//frameborder 是否有边框   	  1：有边框    0：无边框
//scrolling   是否有滚动条	  yes：有      no：无    auto：自动
注意：开发环境file后需要加上后端ip 	正式环境不用加
<iframe :src="'/static/jsPDF/web/viewer.html?file=http://192.168.105.42:9090'+encodeURIComponent(url)"  width="100%" height="100%" frameborder="0" scrolling="no"></iframe>

二、后端返回pdf的url

/Files/Documents/2021-5/P2021F2内外0017CN0001/InFile/201821763950X(00010120-0022922247)F20210521162247477.pdf

三、预览效果
在这里插入图片描述

Zh.冠军
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
手机端PDF展示js(无插件无需安装，兼容各浏览器)
05-11
只要下载pdf.js，然后把pdf的url传入调用界面即可，不用flash或者安装插件
iframe URL预览「Iframely URL Previews」-crx插件
03-21
就像在Lifehacker和PC World上看到的那样。印版iframe Gmail。现在:在任何站点上预览url。 仅限于Gmail，我们知道还会向您显示内联预览并嵌入到任何其他网站上。因此，您不必中断浏览体验 Iframely插件是一个简单的脚本，可在您访问的页面上查找纯URL链接，并将[show]附加到其末尾。点击[显示]后，Iframely将抓取URL预览并将其显示在链接下方。单击[隐藏]关闭预览。就是这样，很贴心。注意：由于Gmail已更改其安全策略，因此不再适用于Gmail，并且不再允许第三方iFrame。针对那些关心的人的一些技术细节：* Iframely是一个简单的脚本，它可以检测与目标href匹配的文本的链接锚 *我们在您的页面上没有任何数据，仅当您单击[显示]时才调用我们的代码。*如果您想查看，该插件的源代码是开源的：https://github.com com / itteco / iframely-gmail *插件由Iframely Cloud API（http://iframe.ly）提供支持。 支持语言:English
【vue2中的pdf预览】iframe/pdf.js/vue-pdf
记录
09-05 3108
vue2中预览pdf的方法有pdf.js和vue-pdf等。进行简单对比&使用方法的介绍。
vue3中当后端返回的数据格式为“{“url“:“https:...“}“时，数据回显问题
m0_52761651的博客
04-07 452
vue3中当后端返回的数据格式为“{“url“:“https://gateway.dev.medipath.com.cn/cif/uploa“}“时，数据回显问题
vue后端接口返回地址跳转url页面
weixin_56173280的博客
05-12 2796
//点击去充值 async GoToPrepaidPhone(){ let msg = { subject:sessionStorage.getItem('devdatatablename'),//设备类型 total_pay:this.money,//总金额 dev_number_name:this.nametext,//交易类型 username:sessionStorage.getItem('usern...
vue3管理系统中后台返回pdf格式的文件流，前端如何预览？以及uniapp微信小程序中后台返回的base64位的pdf文件如何预览？
weixin_49781735的博客
12-01 2042
后台返回的是base64格式的pdf文件，首先需要解析base64文件的插件。2 封装预览pdf的函数。3 调用接口获取数据。
后端返回url实现预览和下载文件（目前只支持图片和pdf文档）
weixin_43996999的博客
02-27 9657
最近新接触的一个node+express的项目，要做一个在线预览和下载的功能。费了好大的劲，总算是写的差不多了，下面总结一下： 这次并没有调取接口，是在列表的操作列有一个预览按钮。然后后端将文件的url、type、id都在列表的每条数据里返给了我们 点击预览的时候需要弹框展示，这里用到的是layui的模态框 我们拿到文件url，在弹框 ...
vue-pdf预览pdf文件流
01-13
`vue-pdf`是一个强大的插件，它允许我们在Vue组件中轻松地集成PDF预览功能。这个插件是基于PDF.js库构建的，PDF.js是由Mozilla维护的一个开源项目，用于在浏览器中呈现PDF文件，而`vue-pdf`则是将其包装成适用于Vue...
基于vue-admin和后端flask分离结合的超简单模板
02-25
本项目基于"基于vue-admin和后端flask分离结合的超简单模板"，展示了如何将Vue.js（一个流行的前端JavaScript框架）与Flask（一个轻量级的Python Web服务器和Web应用框架）相结合，实现高效且易于维护的Web应用。...
vue-admin-template与SpringBoot前后端接口请求数据示例代码.rar
09-08
后端通过定义API接口，暴露特定的URL，前端通过调用这些URL并附带必要的参数，实现数据的交换。常见的接口请求方式有GET（获取数据）、POST（提交数据）、PUT（更新数据）和DELETE（删除数据）。JSON是常见的数据...
html2canvas生成pdf(html高度自适应带iframe)
01-12
使用html2canvas及jspdf 将带iframe的页面保存成pdf,解决有滚动时不能全部截取的问题及转换过程中背景黑色的问题
vue 使用 vue-pdf 实现pdf在线预览的示例代码
11-21
在 Vue 中实现 PDF 在线预览功能，我们可以借助专门的库 `vue-pdf`。这篇笔记将详细介绍如何使用 `vue-pdf` 来实现在 Vue 应用中预览 PDF 文件，并解决一些常见问题。 首先，要安装 `vue-pdf`，在命令行中运行以下...
vue-pdf预览pdf文件流示例
12-26
vue-pdf库接受一个`:src`属性，该属性可以接收一个Promise，返回PDF的URL、数据URL或者Blob对象。对于文件流，我们通常会从后端API获取一个Blob对象。以下是一个简单的示例： ```html <pdf :src="pdfSrc" v-...
vue 根据接口返回的url预览pdf和下载pdf文件
qq_44782585的博客
06-07 6393
接下来我们创建一个URL对象，以便在浏览器中访问该PDF文件，然后创建一个a标签并设置其href属性为该URL对象的值。pdf的URL直接打开的话是网页预览界面，而不是文件下载，文件下载需要的是二进制数据，但是如果接口返回的是在线链接，那么可以通过以下操作进行格式转化再去下载。创建一个方法downloadPDF()，接收一个在线URL地址，然后使用axios发送GET请求获取PDF文件的二进制数据。这将会在点击该按钮时调用downloadPDF()方法并下载名为file.pdf的PDF文件。
vue-pdf实现pdf文件在线预览
PDFReaderPro的博客
08-11 2958
在日常的工作中在线预览 PDF 文件的需求是很多的，下面介绍一下使用 vue-pdf 实现pdf文件在线预览使用 npm 安装 vue-pdf使用 vue-pdf 显示 PDF 文件此时页面中就会显示我们提供的 PDF 文件了，但是此时只显示了 PDF 文件的第一页按页显示 PDF 文件使用 vue-pdf 能满足我们预览 PDF 文件的要求，但是使用起来太繁琐了，配置很多，无法开箱使用，下面介绍一款 PDF SDK 实现 PDF 在线预览。
vue-pdf教程；前端pdf文件预览/pdf流文件预览
小小前端攻城狮
09-06 2196
vue-pdf教程 前端pdf文件预览 fdf文件流预览
vue预览pdf文件的几种方法
最新发布
夜空孤狼啸的博客
01-26 8798
前端预览pdf的几种方法
ExtJS 4 在Ext.tab.Panel中使用Ext.ux.IFrame打开url指向的网页
weixin_30487701的博客
12-20 226
ext-4.2.1.883\examples\ux\IFrame.js ext-4.2.1.883\examples\ux\TabCloseMenu.js 复制到 \Scripts\ext-4.2.1.883\src\ux\ Ext.require('Ext.ux.IFrame'); Ext.define('Web.TabPanel', { extend: 'Ex...
vue 3.0 使用axios
weixin_38673922的博客
12-10 5936
一、安装axios ，vue-axios 使用yarn: yarn add axios yarn add vue-axios 使用npm npm install axios npm install vue-axios 二、在项目src文件夹建一个可以存放配置文件 三、 config.js文件用来存放后端请求接口地址 // config.js文件用来存放后端请求接口地址 export default { baseUrl: { dev: '/api' // 开发环境
vue使用pdfjs-dist插件后端如何返回正确的PDF文件路径
07-28
在Vue中使用pdfjs-dist插件时，你需要将后端返回的PDF文件路径传递给前端，以便正确加载和显示PDF文件。下面是一个示例，展示如何在后端返回正确的PDF文件路径给前端： 1. 后端应该提供一个API接口，用于获取PDF...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值