vue3 pdf base64转成文件流打开

vue3 pdf base64转成文件流打开

1、先下载依赖

"vue-pdf": "^4.3.0",

"canvas": "^2.11.2",

"pdfh5": "^1.4.0",

"pdfjs-dist": "2.5.207",

2、文件流转换

复制代码
 const getList = async () => {
    const res = await TH36({
      query_type: '2',
      start_date: data.start_date,
      end_date: data.end_date,
    })
    console.log(res)
    if (res.data.head.errorFlag != 0) {
      Toast(res.data.head.errorMsg)
    } else {
      // data.base64Url = 'data:image/png;base64,' + res.data.data.result.pdf
      data.base64Url = 'data:application/pdf;base64,' + res.data.data.result.pdf
      viewPdf(res.data.data.result.pdf)
    }
  }
  // content是base64格式
  const viewPdf = (content) => {
    // console.log('content', content)
    const blob = base64ToBlob(content)
    // if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    //   console.log('1:', blob)
    //   window.navigator.msSaveOrOpenBlob(blob)
    // } else {
    const fileURL = URL.createObjectURL(blob)
    console.log('2:', fileURL)
    // window.location.href = fileURL //打开ppf文件
    router.push({
      path: '/service/equityRecordFormDetail',
      query: {
        url: fileURL,
      },
    })
    // }
  }
  const base64ToBlob = (code) => {
    code = code.replace(/[\n\r]/g, '') // 检查base64字符串是否符合base64编码
    // atob() 方法用于解码使用 base-64 编码的字符串。
    const raw = window.atob(code)
    const rawLength = raw.length
    const uInt8Array = new Uint8Array(rawLength)
    for (let i = 0; i < rawLength; ++i) {
      // 将解码后的逐个字符转换成Unicode序号,放入Unit8Array数组
      uInt8Array[i] = raw.charCodeAt(i)
    }
    // 通过Blob将Uint8Array数组转换成pdf类型的文件对象
    return new Blob([uInt8Array], { type: 'application/pdf' })
  }

3、打开pdf

复制代码
<template>
  <div id="app">
    <div id="demo"></div>
  </div>
</template>

<script setup>
  import { reactive, toRefs, onMounted } from 'vue'
  import { useRoute } from 'vue-router'
  import Pdfh5 from 'pdfh5'
  import 'pdfh5/css/pdfh5.css'
  const route = useRoute()
  const id = route.query.id
  const data = reactive({
    pdfh5: null,
    PDFsrc: route.query.url,
  })
  onMounted(() => {
    //实例化
    data.pdfh5 = new Pdfh5('#demo', {
      pdfurl: data.PDFsrc,
    })
    //监听完成事件
    data.pdfh5.on('complete', function (status, msg, time) {
      console.log(
        '状态:' +
          status +
          ',信息:' +
          msg +
          ',耗时:' +
          time +
          '毫秒,总页数:' +
          data.totalNum
      )
    })
  })
  const { content } = toRefs(data)
</script>

<style lang="scss" scoped>
  * {
    padding: 0;
    margin: 0;
  }
  html,
  body,
  #app {
    width: 100%;
    height: 100%;
  }
  #demo {
    height: 100vh;
    overflow: hidden;
    overflow-y: scroll;
  }
</style>
相关推荐
开开心心就好35 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享36 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君7 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js