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

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.dtcms.com/a/178527.html

相关文章:

  • vue中scss使用js的变量
  • uniapp上架苹果APP Store踩雷和部分流程注意事项(非完整流程)
  • uniapp|实现多终端聊天对话组件、表情选择、消息发送
  • CSS3 过渡与动画
  • XML简单介绍
  • 2.2 点云数据存储格式——通用型点云存储格式
  • DUNE 开源项目介绍与使用指南
  • 2025年Java基础知识总结难点亮点(超详细整理)
  • 希音Shein测评补单:跨境电商运营的新利器与实操指南
  • 微信小程序使用腾讯云COS SDK实现用户头像上传
  • 学习设计模式《八》——原型模式
  • 手撕基于AMQP协议的简易消息队列-3(项目所用到的工具类的编写)
  • 从零打造个人博客静态页面与TodoList应用:前端开发实战指南
  • 什么是变量提升?
  • C++-缺省参数
  • 菊厂笔试1
  • 电子电器架构 --- 电气/电子架构如何发展以满足其处理和传感器融合需求
  • CAN总线通讯接口卡:工业通信的核心桥梁
  • 在UI原型设计中,低、高保真原型图有什么区别?
  • 验证码(笔记)
  • web 自动化之 Selenium 元素定位和浏览器操作
  • 数据结构 - 10( B- 树 B+ 树 B* 树 4000 字详解 )
  • Node.js 技术原理分析系列9——Node.js addon一文通
  • AI开发跃迁指南(第三章:第四维度1——Milvus、weaviate、redis等向量数据库介绍及对比选型)
  • 腾讯云:数字世界的“量子熔炉”与硅基文明引擎​
  • LeetCode 热题 100 238. 除自身以外数组的乘积
  • 16011.自动分簇KMeans算法
  • element MessageBox 实现底部三个按钮或者更多按钮—开箱即用
  • 【MySQL】第二弹——MySQL表的增删改查(CURD))
  • 【MySQL】存储引擎 - MEMORY详解