首页 > 其他分享 >vue-pdf 预览pdf (数据流)

vue-pdf 预览pdf (数据流)

时间:2024-03-21 11:32:37浏览次数:27  
标签:vue 预览 res binaryData application pdf data

         页面有个要预览pdf的需求,数据是从后台传递过来的数据流:

1.安装插件:

npm install vue-pdf

2. 在页面引用:

import pdf from 'vue-pdf'

...
  components: {pdf},

3. html中添加:

 <pdf :src="pdfUrl"></pdf>

4.通过接口获取数据:

  downloadFile({ id: this.id }).then((res) => {
        if (
          (!res && res.status != 200) ||
          (res.data &&
            res.data.type == "application/json")
        ) {
          this.$message.error("找不到该文件");
          return;
        }
          var binaryData = [];
          binaryData.push(res.data);
          // 记得一定要设置application的类型
          let url = window.URL.createObjectURL(
            new Blob(binaryData, {
              type: "application/pdf;charset=utf-8",
            })
          );
          if (url) {
            this.pdfUrl = pdf.createLoadingTask(url);
          }
      });

标签:vue,预览,res,binaryData,application,pdf,data
From: https://blog.csdn.net/reembarkation/article/details/136902476

相关文章

  • vite+vue3+vuex 加密
    1.安装JSEncrypt  npminstalljsencrypt2.加密方法//加密算法import{JSEncrypt}from'jsencrypt';//加密functionencryptText(text){ constpublicKey='MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCh5Nk2GLiyQFMIU+h3OEA4UeFbu3dCH5sjd/sLTxxvwjXq7JLqJbt2rC......
  • vue项目中使用html2canvas插件
    一、生成海报图vue项目中使用html2canvas插件,实现将编写的html代码转成可以保存的图片,只需要以下四步。1、在vue项目中安装插件npmihtml2canvas 2、在需要使用到的页面引入html2canvas插件importhtml2canvasfrom“html2canvas”; 3、按照设计图编写html代码<d......
  • OpenHtmlToPdf工具rgba转rgb
    使用OpenHtmlToPdf工具将html转pdf时不识别html中的rgba属性,导致颜色显示出现问题测试字符串StringpdflFile="/yourPath/ppm-3.pdf";FileOutputStreamoutputStream=newFileOutputStream(pdflFile);try(FileOutputStreamfos=newFileOutputStream(p......
  • Vue.js+SpringBoot开发服装店库存管理系统
    目录一、摘要1.1项目介绍1.2项目录屏二、功能模块2.1数据中心模块2.2角色管理模块2.3服装档案模块2.4服装入库模块2.5服装出库模块三、系统设计3.1用例设计3.2数据库设计3.2.1角色表3.2.2服装档案表3.2.3服装入库表3.2.4服装出库表四、系统展示五、核......
  • Vue.js+SpringBoot开发高校宿舍调配管理系统
    目录一、摘要1.1项目介绍1.2项目录屏二、功能需求2.1学生端2.2宿管2.3老师端三、系统展示四、核心代码4.1查询单条个人习惯4.2查询我的室友4.3查询宿舍4.4查询指定性别全部宿舍4.5初次分配宿舍五、免责说明一、摘要1.1项目介绍基于JAVA+Vue+Spring......
  • pdf.js不显示签章
    原文链接:https://www.jianshu.com/p/d8f7348b3d2a解决pdf.js预览pdf不显示签名问题(两条路) 第一种方法:注释掉pdf.worker.js里的这三行代码://if(data.fieldType==="Sig"){//data.fieldValue=null;//this.setFlags(_util.AnnotationFlag.HIDDEN);//}一般情况下,注释......
  • XSS 从 PDF 中窃取数据
    XSS从PDF中窃取数据将服务器端XSS注入到动态生成的PDF中在hackthebox的Book机器(ScriptingTrack)上,我遇到了一个Web应用程序,它使用用户控制的输入来生成PDF文件。用户输入输入,下载时该输入将呈现为PDF文件。我从阅读许多文章中意识到与动态生成的PDF相关的......
  • 基于java+springboot+vue实现的电影院选票系统(文末源码+Lw+ppt)23-467
    摘要时代在飞速进步,每个行业都在努力发展现在先进技术,通过这些先进的技术来提高自己的水平和优势,电影院选票系统当然不能排除在外。电影院选票系统是在实际应用和软件工程的开发原理之上,运用java语言,前台Vue框架以及后台SpringBoot框架进行开发。首先要进行需求分析,分析出电......
  • 基于java+springboot+vue实现的智慧养老院管理系统(文末源码+Lw+ppt)23-490
    摘 要智慧养老院管理系统采用B/S架构,数据库是MySQL。网站的搭建与开发采用了先进的java进行编写,使用了springboot框架。该系统从三个对象:由管理员和家属、护工来对系统进行设计构建。主要功能包括:个人信息修改,对家属信息、护工信息、老人入住、外出报备、退房登记、每月餐饮......
  • 基于java+springboot+vue实现的学生管理系统(文末源码+Lw+ppt)23-486
    摘  要学生管理系统的目的是让使用者可以更方便的将人、设备和场景更立体的连接在一起。能让用户以更科幻的方式使用产品,体验高科技时代带给人们的方便,同时也能让用户体会到与以往常规产品不同的体验风格。与安卓,iOS相比较起来,学生管理系统在流畅性,续航能力,等方方面面都有......