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>
相关推荐
雪碧聊技术11 分钟前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
快起来别睡了13 分钟前
手写 Ajax 与 Promise:从底层原理到实际应用
前端
打不着的大喇叭1 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code1 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟1 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00001 小时前
Vue组件通信方式详解
前端·面试
呆呆的心1 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
百锦再1 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down