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');
    },
相关推荐
Mintopia9 分钟前
🧠 从像素到现实:用 Three.js + Cesium 构建数字孪生系统
前端·javascript·three.js
xyphf_和派孔明24 分钟前
关于Web前端安全防御CSRF攻防的几点考虑
前端·安全·csrf
stars34 分钟前
数字人开发02--前端服务配置
前端·人工智能
懋学的前端攻城狮1 小时前
Next.js + TypeScript + Shadcn UI:构建高性能懒加载与无限滚动系统
前端·react.js·前端框架
宋辰月2 小时前
Vue2的进阶Vue3
前端·javascript·vue.js
酷飞飞2 小时前
C语言的复合类型、内存管理、综合案例
java·c语言·前端
姜太小白3 小时前
【前端】CSS Grid布局介绍及示例
前端·css
风继续吹..7 小时前
后台管理系统权限管理:前端实现详解
前端·vue
yuanmenglxb20047 小时前
前端工程化包管理器:从npm基础到nvm多版本管理实战
前端·前端工程化
新手小新7 小时前
C++游戏开发(2)
开发语言·前端·c++