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');
    },
相关推荐
再学一点就睡8 分钟前
深入理解 Redux:从手写核心到现代实践(附 RTK 衔接)
前端·redux
天天进步20151 小时前
从零到一:现代化充电桩App的React前端参考
前端·react.js·前端框架
柯南二号1 小时前
【大前端】React Native Flex 布局详解
前端·react native·react.js
龙在天2 小时前
npm run dev 做了什么❓小白也能看懂
前端
hellokai3 小时前
React Native新架构源码分析
android·前端·react native
li理3 小时前
鸿蒙应用开发完全指南:深度解析UIAbility、页面与导航的生命周期
前端·harmonyos
去伪存真3 小时前
因为rolldown-vite比vite打包速度快, 所以必须把rolldown-vite在项目中用起来🤺
前端
KubeSphere3 小时前
Kubernetes v1.34 重磅发布:调度更快,安全更强,AI 资源管理全面进化
前端
wifi歪f3 小时前
🎉 Stenciljs,一个Web Components框架新体验
前端·javascript
1024小神4 小时前
如何快速copy复制一个网站,或是将网站本地静态化访问
前端