Vue3 + pdfh5 实现PDF预览

<template>
  <Header :title="getpdfTitle" :help-icon="false"></Header>
  <div id="myPDF">
    <div id="demo"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, nextTick } from 'vue'
import { Header } from '@/components/Header'
import Pdfh5 from 'pdfh5'
import 'pdfh5/css/pdfh5.css'

const pdfh5 = ref()
const getpdfTitle = ref()

  nextTick(() => {
    pdfh5.value = new Pdfh5('#demo', {
      pdfurl: "接口返回的pdf url",
    })
  })

</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
html,
body,
#myPDF {
  width: 100%;
  height: 100%;
}
</style>

pakage.json

"dependencies":{

  "canvas": "^2.11.2",

    "dommatrix": "^1.0.3",

    "pdfh5": "^1.4.7",

    "web-streams-polyfill": "^3.2.1"

}

 

"peerDependencies": {

    "worker-loader": "^3.0.8"

  },

  "peerDependenciesMeta": {

    "worker-loader": {

      "optional": true

    }

  },

  "browser": {

    "canvas": false

  },