pdfh5 pdf

踩坑1: 渲染失败

(1)在vue项目中,读取本地的pdf文件需要放到public下static文件夹中,不能放在别的地方;

(2)引用时,不能使用相对路径,因为使用public文件下面的资源,是不会被webpack处理的,它们会被直接复制到最终的打包目录下面,且必须使用绝对路径来引用这些文件。写法:"/static/pdf/show.pdf",/即表示public文件夹(需略去public);

文档:

https://www.npmjs.com/package/pdfh5

安装:

javascript 复制代码
npm install pdfh5 --legacy-peer-deps
npm install --save canvas --legacy-peer-deps
html 复制代码
<script setup>
import { ref } from 'vue'
import Pdfh5 from 'pdfh5'
import 'pdfh5/css/pdfh5.css'

// pdfh5实例
const pdfh5 = ref(null)

// pdf预览
const handlePreview = () => {
  pdfh5.value = new Pdfh5('#demo', {
    pdfurl: '/static/1.pdf',  // 读取本地的pdf文件需要放到public下static文件夹中
  })
}

const beforeRead = (file) => {
  if (file.type == 'application/pdf') {
    // 使用类型化数组(Uint8Array)可以提高内存使用率。
    let reader = new FileReader()
    reader.readAsArrayBuffer(file)
    reader.onload = (loadEvent) => {
      let arrayBuffer = loadEvent.target.result
      pdfh5.value = new Pdfh5('#demo', {
        data: arrayBuffer,
      })
    }
  }
  return true
}

const afterRead = (file) => {
  // file.content是BASE64
  // PDF数据是BASE64编码的,请先使用atob()将其转换为二进制字符串
  // const data = atob(file.content.replace('data:application/pdf;base64,', '')) // 去除BASE64编码的头
  // pdfh5.value = new Pdfh5('#demo', {
  //   data
  // })
}
</script>

<template>
  <div class="home-page">
    <header class="header">
      <van-button type="default" @click="handlePreview" style="margin-right: 8px;">通过pdfurl预览</van-button>
      <van-uploader accept=".pdf" :before-read="beforeRead" :after-read="afterRead">
        <van-button icon="plus" type="primary">通过pdf文件流预览</van-button>
      </van-uploader>

    </header>
    <main class="main">
      <div id="demo"></div>
    </main>
  </div>
</template>

<style>
.home-page {
  width: 100%;
  height: 100%;

  .header {
    height: 50px;
    display: flex;
    align-items: center;
  }

  .main {
    height: calc(100% - 50px);
  }

  #demo {
    width: 100%;
    height: 100%;
  }
}
</style>
相关推荐
一只花里胡哨的程序猿2 小时前
odoo打印pdf速度慢问题
pdf·odoo
灵海之森4 小时前
Python将md转html,转pdf
pdf
阿幸软件杂货间8 小时前
最新PDF版本!Acrobat Pro DC 2025,解压即用版
pdf·adobe acrobat·acrobat
星空的资源小屋10 小时前
网易UU远程,免费电脑远程控制软件
人工智能·python·pdf·电脑
会飞的小菠菜13 小时前
如何一次性将多个PPT幻灯片批量转换成PDF文档
pdf·powerpoint·ppt·批量·格式转换
somethingGoWay16 小时前
wpf .netcore 导出pdf文件
pdf·wpf·.netcore
小白电脑技术1 天前
PDF教程|如何把想要的网页保存下来?
pdf·电脑
我没想到原来他们都是一堆坏人1 天前
通过Gen AI SDK调用gemini 2.5 pro,单独上传pdf文件 | ai agent 开发笔记 2025.9.2 Day 2
ai·google·pdf·sdk·gemini
AI视觉网奇1 天前
麒麟系统 doc转pdf
linux·运维·pdf
CodeCraft Studio1 天前
国产化PDF处理控件Spire.PDF教程:如何在 Java 中通过模板生成 PDF
java·python·pdf·spire.pdf·java创建pdf·从html创建pdf