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

javascript 复制代码
<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 = this
      let params = {
        fileName: url.split("/").pop()
      }
//fileProxyPdf 是后端的接口 返回的是一个pdf
      fileProxyPdf(params).then((response) => {      
        const blob = new Blob([response.data], { type: 'application/pdf' });
        const ourl = window.URL.createObjectURL(blob);
        // 将Object URL赋值给pdfUrl
        this.pdfUrl = ourl
        this.showDialog = true    
        this.pdfIslock = false      
      }).catch(function(){
        that.$message.error("下载失败,请稍后重试")
        that.pdfIslock = false 
      });      
      //window.open(url, '_blank');
    },
相关推荐
码农捻旧38 分钟前
前端性能优化:从之理论到实践的破局道
前端·性能优化
3Katrina39 分钟前
前端面试之防抖节流(一)
前端·javascript·面试
浏览器API调用工程师_Taylor1 小时前
自动化重复任务:从手动操作到效率飞跃
前端·javascript·爬虫
赵润凤1 小时前
Vue 高级视频播放器实现指南
前端
FogLetter1 小时前
从原生JS事件到React事件机制:深入理解前端事件处理
前端·javascript·react.js
小公主1 小时前
如何利用闭包封装私有变量?掌握防抖、节流与 this 问题的巧妙解决方案
前端
烛阴2 小时前
JavaScript 的动态魔法:使用 constructor 动态创建函数
前端·javascript
前端 贾公子2 小时前
tailwind ( uni ) === 自定义主题
前端
独立开阀者_FwtCoder2 小时前
大制作!在线 CSS 动效 编辑神器!太炫酷了!
前端·javascript·github
白白李媛媛2 小时前
vue3中实现echarts打印功能
前端·vue.js·echarts