当前位置: 首页 > 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');},

相关文章:

  • vue中scss使用js的变量
  • uniapp上架苹果APP Store踩雷和部分流程注意事项(非完整流程)
  • uniapp|实现多终端聊天对话组件、表情选择、消息发送
  • CSS3 过渡与动画
  • XML简单介绍
  • 2.2 点云数据存储格式——通用型点云存储格式
  • DUNE 开源项目介绍与使用指南
  • 2025年Java基础知识总结难点亮点(超详细整理)
  • 希音Shein测评补单:跨境电商运营的新利器与实操指南
  • 微信小程序使用腾讯云COS SDK实现用户头像上传
  • 学习设计模式《八》——原型模式
  • 手撕基于AMQP协议的简易消息队列-3(项目所用到的工具类的编写)
  • 从零打造个人博客静态页面与TodoList应用:前端开发实战指南
  • 什么是变量提升?
  • C++-缺省参数
  • 菊厂笔试1
  • 电子电器架构 --- 电气/电子架构如何发展以满足其处理和传感器融合需求
  • CAN总线通讯接口卡:工业通信的核心桥梁
  • 在UI原型设计中,低、高保真原型图有什么区别?
  • 验证码(笔记)
  • 越秀地产前4个月销售额约411.2亿元,达年度销售目标的34.1%
  • 从“重规模”向“重回报”转变,公募基金迎系统性改革
  • 上海:5月8日起5年以上首套个人住房公积金贷款利率下调至2.6%
  • 巴国家安全委员会授权军方自主决定对印反击措施
  • 李云泽:支持小微企业、民企融资一揽子政策将从增供给、降成本、提效率、优环境4个方面发力
  • 李云泽:将尽快推出支持小微企业民营企业融资一揽子政策