当前位置: 首页 > backend >正文

vue2 结合后端预览pdf 跨域的话就得需要后端来返回 然后前端呈现

<el-button :loading="pdfIslock" v-if="isPDFFile(form.pic)" type="primary" style="margin: 15px 0" @click="previewPDF(form.pic)"> 预览pdf
</el-button>//npm install pdfjs-dist //如果没有就得先安装import pdf from 'vue-pdf';
components: {pdf,},data(){return {pdfIslock: false,pdfUrl: "",showDialog: false,   }
}previewPDF(url){if(this.pdfIslock){this.$message.warning("文件下载中")return}this.pdfIslock = true      if(!url){this.$message.error("请先上传文件")return}const that = thislet params = {fileName: url.split("/").pop()}
//fileProxyPdf 是后端的接口 返回的是一个pdffileProxyPdf(params).then((response) => {      const blob = new Blob([response.data], { type: 'application/pdf' });const ourl = window.URL.createObjectURL(blob);// 将Object URL赋值给pdfUrlthis.pdfUrl = ourlthis.showDialog = true    this.pdfIslock = false      }).catch(function(){that.$message.error("下载失败,请稍后重试")that.pdfIslock = false });      //window.open(url, '_blank');},

http://www.xdnf.cn/news/4709.html

相关文章:

  • node.js 实战——在express 中将input file 美化,并完成裁剪、上传进度条
  • 本地可执行命令的智能体部署方案
  • 【WebRTC-12】CreatePeerConnection究竟创建了什么?
  • 开发函数踩坑记 sum(1) over(partition by stock_code order by trade_date asc)
  • 信息系统项目管理工程师备考计算类真题讲解十五
  • java面试OOM汇总
  • 边缘网关(边缘计算)
  • 云平台的技术方向和总体规划
  • 基于卫星遥感数据进行农作物长势监测原理简述
  • BeeWorks IM:专业安全的企业私有化即时通讯软件
  • Linux——Mysql数据库
  • 数据结构*二叉树
  • 软件测试学习笔记
  • 数据结构 - 9( 位图 布隆过滤器 并查集 LRUCache 6000 字详解 )
  • 数据结构 - 10( B- 树 B+ 树 B* 树 4000 字详解 )
  • 谷云科技iPaaS技术实践:集成平台如何解决库存不准等问题
  • 智能外呼机器人的核心优势
  • 《算法导论(第4版)》阅读笔记:p11-p13
  • 图形渲染+事件处理最终版
  • 含铜废水循环利用体系
  • 【杂谈】Godot 2D游戏窗口设置
  • Nginx +Nginx-http-flv-module 推流拉流
  • JAVA:Spring Boot 集成 Lua 的技术博客
  • 深入理解进程与线程、进程池与线程池:企业级开发实战指南
  • Perspective,数据可视化的超级引擎!
  • 【图片合并PDF】一次性将多个文件夹里的图片批量按文件夹为单位合并PDF,多个文件夹图片合并PDF,基于WPF的实现方案
  • win64下cmake+mingw64编译libhv
  • 基于智能家居项目 RGB彩灯(P9813)
  • MIST:一键解锁 macOS 历史版本,旧系统安装不再难!
  • 小米 MiMo 开源:7B 参数凭什么 “叫板” AI行业巨头?