Vue3 pdf.js将二进制文件流转成pdf预览

news2024/11/16 1:52:00

好久没写东西,19年之前写过一篇Vue2将pdf二进制文件流转换成pdf文件,如果Vue2换成Vue3了,顺带来一篇文章,pdf.js这个东西用来解决内网pdf预览,是个不错的选择。

首先去pdfjs官网,下载需要的文件

然后将下载的东西放到public文件下

接下来看一下代码

<auto-dialog
    title="PDF预览"
    :visible="visible"
    :appendToBody="true"
    @close="close"
    width="850px"
    id="pdfDialog"
    class="pdfDialog"
  >
    <template #content>
      <div
        class="pdfContent"
        id="pdfContent"
        v-loading="loading"
        element-loading-text="PDF加载中..."
      >
        <iframe v-if="showPdf" id="previewPdf" :src="pdfSrc" height="500px" width="100%"> </iframe>
      </div>
    </template>
  </auto-dialog>
//方法
loading.value = true
  nextTick(async () => {
    let res = await Pdf({ filePath: props.src }).catch(() => {})
    if (res) {
      //实例读取文件对象
      const r = new FileReader()
      r.onload = function () {
        try {
          loading.value = false
          // this.result为FileReader获取blob数据,如果返回报错信息,则是正确的json数据,JSON.parse会正常转换
          //如果返回文件流,则JSON.parse时会报错,走catch代码块(进行正常的文件下载)
          const resData = JSON.parse(this.result)
          //resData是后端返回的json数据
          console.log(resData)

          if (resData.code !== 0) {
            ElMessage({
              message: resData.msg,
              type: "error"
            })
            return
          }
        } catch (error) {
          var binaryData = []
          binaryData.push(res)
          console.log(binaryData, "------------------------+++binaryData1111111111111111")
          let url = window.URL.createObjectURL(
            new Blob(binaryData, {
              type: "application/pdf"
            })
          )

          showPdf.value = true
          loading.value = false
          pdfSrc.value =
            "/pdf/web/viewer.html?file=" +
            encodeURIComponent(url) +
            "&myTime=" +
            new Date().getTime()
        }
      }
      r.readAsText(res)
    }
  })

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1910973.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

前端入门知识分享:如何在HTML或CSS文件中引用CSS文件。

阅读提示&#xff1a;本文仅仅仅适用于刚刚接触HTML和CSS的小白从业者&#xff0c;新人爱好者。自觉身份不符的老鸟们&#xff0c;尽快绕行吧&#xff01; 什么是CSS&#xff1f;什么是CSS文件。 CSS&#xff0c;全称为Cascading Style Sheets&#xff08;层叠样式表&#xff…

数字化时代下,财务共享数据分析建设之路

随着人工智能、云计算、大数据、区块链等技术&#xff0c;以及衍生出的各种产品的大发展&#xff0c;使得数字化发展的速度再一次加快&#xff0c;也让数字经济和数字化转型得到了更多人的关注和认可。 在传统经济增长逐渐放缓&#xff0c;市场竞争愈发激烈的局面下&#xff0…

解决虚拟机文件因快照占用硬盘空间较多的情况(压缩虚拟机文件,节省硬盘空间)

在使用虚拟机(Wmware)中&#xff0c;我们经常会在需要的时候拍摄虚拟机快照&#xff0c;尤其是虚拟机运行时的快照&#xff0c;动辄几个G&#xff0c;容易占满硬盘空间&#xff0c;那么有什么方法能够压缩虚拟机文件呢 下面是压缩后的存放虚拟机的文件夹 可以看到节约了大约2…

Banana Pi BPI-F3开发板支持OpenWrt

Banana Pi BPI-F3开源硬件开发板支持OpenWrt了。 基于原生OpenWrt 23.05集成Spacemit Stone 系列芯片的 BSP&#xff0c;包含监管程序接口&#xff08;OpenSBI&#xff09;、引导加载程序&#xff08;U-Boot/UEFI&#xff09;、Linux 内核、根文件系统&#xff08;包含各种中间…

安防视频监控/云存储/视频汇聚EasyCVR平台播放设备录像不稳定,是什么原因?

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;EasyCVR基于云边端一体化架构&#xff0c;具有强大的数据接入、处理及分发能力&#xff0c;可提供7*24小时实时高清视频监控、云端录像、云存储、录像检索与回看、智能告警…

【微信小程序开发实战项目】——个人中心页面的制作

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…

hash

哈希 key->value&#xff0c;借助离散化的思想对数据进行映射&#xff0c;可视为用value代表原本的key 在C中&#xff0c;可使用map当做哈希表使用&#xff0c;将std::hash当做哈希函数使用 hash<Typename>name; size_t valuename(key);数字哈希 哈希函数的设计 方…

更亮更好听的户外耳机,下班之后畅快运动,哈氪聆光体验

在当今市场上&#xff0c;蓝牙耳机种类繁多&#xff0c;现在正值酷热的夏季&#xff0c;有必要准备一副适合户外活动的蓝牙耳机&#xff0c;对此&#xff0c;我觉得气传导耳机更适合在户外锻炼或散步时使用。这种耳机设计通常为后挂式&#xff0c;不仅佩戴舒适&#xff0c;而且…

08-《含笑》

含 笑 含笑花 拉丁文名&#xff1a;Michelia figo &#xff08;Lour.&#xff09;Spreng。常绿灌木&#xff0c;高2-3米&#xff0c;树皮灰褐色&#xff0c;分枝繁密&#xff1b;叶革质&#xff0c;狭椭圆形或倒卵状椭圆形&#xff0c;花期3-5月&#xff0c;果期7-8月。原产中国…

逆向分析之电脑端如何调试一些只能手机端浏览器才可以打开的网站

手机端浏览器的指纹和电脑端浏览器的指纹是不同的,这样只在手机端浏览器运行的网站则可以检测网站是否满足手机端浏览器指纹的要求,不满足则可以进行一些反爬措施。 例如一些公众号,其实就是使用手机端浏览器打开的H5网站,就可以进行手机端浏览器指纹检测。 这里只是讲解下…

表单自定义组件 - 可选择卡片SelectCard

import React from react; import styles from ./index.module.less;type OptionsType {/*** 每个item渲染一行&#xff0c;第0项为标题*/labels?: any[];/*** 自定义渲染内容*/label?: string | React.ReactNode;value: any; }; interface IProps {value?: any;onChange?…

轻空间气膜做了多少项目?

轻空间作为气膜建筑领域的领导者&#xff0c;凭借其卓越的技术和创新的设计&#xff0c;在国内外完成了众多具有代表性的项目。以下是部分轻空间在各个领域中取得的辉煌成绩&#xff0c;展示了其在气膜建筑领域的领先地位和专业能力。 深汕特别合作区气膜羽毛球馆 深汕特别合作…

在任何岗位都可以把自己当成一个项目经理

这几天跟一个刚入职场的姐妹交流的时候&#xff0c;她问了我一个问题&#xff0c;如果让你总结三年从助理升到经理的关键点&#xff0c;你觉得是什么&#xff1f;我思考了那么几秒钟&#xff0c;大概就是——在任何岗位都把自己当项目经理。 今天给大家介绍我的项目管理工具——…

[从0开始轨迹预测][NMS]:NMS的应用(目标检测、轨迹预测)

非极大值抑制&#xff08;Non-Maximum Suppression&#xff0c;简称NMS&#xff09;是一种在计算机视觉中广泛应用的算法&#xff0c;主要用于消除冗余和重叠的边界框。在目标检测任务中&#xff0c;尤其是在使用诸如R-CNN系列的算法时&#xff0c;会产生大量的候选区域&#x…

基于Spring Boot的旅游信息推荐信息系统设计与实现(源码+lw+部署+讲解)

技术指标 开发语言&#xff1a;Java 框架&#xff1a;Spring BootJSP JDK版本&#xff1a;JDK1.8 数据库&#xff1a;MySQL5.7 数据库工具&#xff1a;Navicat16 开发软件&#xff1a;IDEA Maven包&#xff1a;Maven3.6.3 浏览器&#xff1a;IE浏览器 功能描述 旅游信…

怎么压缩ppt?这几种压缩方法大家都在用!

怎么压缩ppt&#xff1f;当我们沉浸在PPT创作的海洋中&#xff0c;每一个精心的布局、每一个动人的动画&#xff0c;都仿佛是我们心血的结晶&#xff0c;然而&#xff0c;随着我们不断雕琢&#xff0c;PPT文件的大小也在悄然增长&#xff0c;如同一只隐形的巨兽&#xff0c;在不…

文华财经盘立方多空变色波段趋势线指标公式源码

文华财经盘立方多空变色波段趋势线指标公式源码&#xff1a; N1:20; N2:ROUND(N1/2,1); N3:ROUND(SQRT(N1),1); N4:2*EMA2(C,N2)-EMA2(C,N1); 尊重市场:EMA2(N4,N3),COLORRED,LINETHICK2; 尊重市场1:IF(尊重市场<REF(尊重市场,1), 尊重市场,NULL),COLORGREEN,LINETHIC…

Redis数据类型和数据队列

一.Redis数据类型 参考资料&#xff1a;http://www.redis.cn/topics/data-types.html 相关命令参考: http://redisdoc.com/ Redis 是一种基于内存的开源数据结构存储系统&#xff0c;支持多种数据类型&#xff0c;每种数据类型都有自己特定的操作命令。 String&#xff08;字…

渲染农场怎么用更省钱?渲染100邀请码1a12

现在越来越多的设计师开始使用渲染农场&#xff0c;其中收费是个大问题&#xff0c;怎么用渲染农场才能更省钱呢&#xff1f;今天我们就来看下吧。 1、明确渲染方式 要根据不同情况选择合理的渲染方式&#xff0c;比如渲染农场就适合大场景渲染和紧急出图情况&#xff0c;其他…

跟我练习100道FPGA入门题目~(2/100)

难度指数&#xff1a;一颗星 关键词&#xff1a;组合逻辑、入门基础 点击此处直接答题&#xff1a;F学社-全球FPGA技术提升平台 (zzfpga.com) 提交代码就能看到波形图和电路图啦&#xff01; &#xff08;在社区加入群聊&#xff0c;更多学友等着和你探讨~&#xff09;