pdfh5 pdf

踩坑1: 渲染失败

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

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

文档:

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

安装:

npm install pdfh5 --legacy-peer-deps
npm install --save canvas --legacy-peer-deps
<div id="app"><div id="demo"></div>
</div>
<script>import Pdfh5 from 'pdfh5'
import 'pdfh5/css/pdfh5.css'
export default {
data() {return {pdfh5: null}
},
mounted() {this.pdfh5 = new Pdfh5('#demo', {pdfurl: '/static/1.pdf',});},
}</script><style>#app {width: 100%;height: 100%;}</style>

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

解决 Not allowed to load local resource 问题

记录一下遇到的问题&#xff1a;html跳转本地资源&#xff0c;用相对路径 这样是不对的&#xff0c;要用 <script src"/jquery.min.js"></script> 网络路径也行&#xff0c;慢了一点 记得一定要关闭浏览器的广告屏蔽器 绝对路径也行&#xff0c;不过要…

STM32实现智能温控系统(暖手宝):PID 算法 + DS18B20+OLED 显示,[学习 PID 优质项目]

一、项目概述 本文基于 STM32F103C8T6 单片机&#xff0c;设计了一个高精度温度控制系统。通过 DS18B20 采集温度&#xff0c;采用位置型 PID 算法控制 PWM 输出驱动 MOS 管加热Pi膜&#xff0c;配合 OLED 实时显示温度数据。系统可稳定将 PI 膜加热至 40℃&#xff0c;适用于…

[深度学习]图像分类项目-食物分类

图像分类项目-食物分类(监督学习和半监督学习) 文章目录 图像分类项目-食物分类(监督学习和半监督学习)项目介绍数据处理设定随机种子读取文件内容图像增广定义Dataset类 模型定义迁移学习 定义超参Adam和AdamW 训练过程半监督学习定义Dataset类模型定义定义超参训练过程 项目介…

C++初阶入门基础二——类和对象(中)

1类的默认成员函数 默认成员函数就是用户没有显式实现&#xff0c;编译器会自动生成的成员函数称为默认成员函数。一个类&#xff0c;我们不写的情况下编译器会默认生成以下6个默认成员函数&#xff0c;需要注意的是这6个中最重要的是前4个&#xff0c;最后两个取地址重载不重…

基于SSM框架的线上甜品销售系统(源码+lw+部署文档+讲解),源码可白嫖!

摘要 网络技术和计算机技术发展至今&#xff0c;已经拥有了深厚的理论基础&#xff0c;并在现实中进行了充分运用&#xff0c;尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代&#xff0c;所以对于信息的宣传和管理就很关键。因此网上销售信息的…

3.25学习总结java 接口+内部类

JDK8以后新增的方法 可以将接口中静态方法和抽象方法中重复的部分抽离出来&#xff0c;作为私有方法&#xff0c;用去private修饰&#xff0c;此方法只为接口提供服务&#xff0c;不需要外界访问。 接口的应用 接口代表规则&#xff0c;是行为的抽象&#xff0c;想让哪个类拥有…

Linux--环境变量

ok&#xff0c;今天我们来学习Linux中的环境变量、地址空间、虚拟内存 环境变量 基本概念 环境变量(environmentvariables)⼀般是指在操作系统中⽤来指定操作系统运⾏环境的⼀些参数如&#xff1a;我们在编写C/C代码的时候&#xff0c;在链接的时候&#xff0c;从来不知道我…

Java 集合 List、Set、Map 区别与应用

一、核心特性对比 二、底层实现与典型差异 ‌List‌ ‌ArrayList‌&#xff1a;动态数组结构&#xff0c;随机访问快&#xff08;O(1)&#xff09;&#xff0c;中间插入/删除效率低&#xff08;O(n)&#xff09;‌‌LinkedList‌&#xff1a;双向链表结构&#xff0c;头尾操作…

基于 arco 的 React 和 Vue 设计系统

arco 是字节跳动出品的企业级设计系统&#xff0c;支持React 和 Vue。 安装模板工具 npm i -g arco-cli创建项目目录 cd someDir arco init hello-arco-pro? 请选择你希望使用的技术栈React❯ Vue? 请选择一个分类业务组件组件库Lerna Menorepo 项目❯ Arco Pro 项目看到以…

JVM-GC(G1)实践—GC异常定位、参数调整、GC更换

前言 如SpringBoot官方介绍所说的那样&#xff0c;从SpringBoot3.x开始支持的最低JDK版本为&#xff1a;JDK17&#xff08;官方推荐使用BellSoft Liberica JDK&#xff09;&#xff0c;其对应的GC为G1。 本文笔者从应用实践的角度出发&#xff0c;记录一些关于GC的一些实践总…

吾爱出品,文件分类助手,高效管理您的 PC 资源库

在日常使用电脑的过程中&#xff0c;文件杂乱无章常常让人感到困扰。无论是桌面堆积如山的快捷方式&#xff0c;还是硬盘中混乱的音频、视频、文档等资源&#xff0c;都急需一种高效的整理方法。文件分类助手应运而生&#xff0c;它是一款文件管理工具&#xff0c;能够快速、智…

修改Flutter工程中Android项目minSdkVersion配置

Flutter项目开发过程中&#xff0c;根据模板自动生成.android项目&#xff0c;其中app>build.gradle中minSdkVersion的值是19&#xff0c;但是依赖了一个三方库&#xff0c;它的Android sdk 最小版本只支持到21&#xff0c;运行报错如下&#xff1a; 我们可以手动修改.andro…

如何设计一个订单号生成服务?应该考虑那些问题?

如何设计一个订单号生成服务&#xff1f;应该考虑那些问题&#xff1f; description: 在高并发的电商系统中&#xff0c;生成全局唯一的订单编号是关键。本文探讨了几种常见的订单编号生成方法&#xff0c;包括UUID、数据库自增、雪花算法和基于Redis的分布式组件&#xff0c;并…

Java学习总结-Stream流

啥是Stream流&#xff1f; 用于操作集合或数组的数据。他就像把数据化为成一条河流&#xff0c;我们可以对这条流操作&#xff0c;例如过滤。 获取Stream流 Stream流的常用方法&#xff1a; Stream流的终结方法&#xff1a; 收集Stream流

《TypeScript 面试八股:高频考点与核心知识点详解》

“你好啊&#xff01;能把那天没唱的歌再唱给我听吗&#xff1f; ” 前言 因为主包还是主要学习js&#xff0c;ts浅浅的学习了一下&#xff0c;在简历中我也只会写了解&#xff0c;所以我写一些比较基础的八股&#xff0c;如果是想要更深入的八股的话还是建议找别人的。 Ts基…

热门面试题第14天|Leetcode 513找树左下角的值 112 113 路径总和 105 106 从中序与后序遍历序列构造二叉树 (及其扩展形式)以一敌二

找树左下角的值 本题递归偏难&#xff0c;反而迭代简单属于模板题&#xff0c; 两种方法掌握一下 题目链接/文章讲解/视频讲解&#xff1a;https://programmercarl.com/0513.%E6%89%BE%E6%A0%91%E5%B7%A6%E4%B8%8B%E8%A7%92%E7%9A%84%E5%80%BC.html 我们来分析一下题目&#…

Qt窗口控件之浮动窗口QDockWidget

浮动窗口QDockWidget QDockWidget 用于表示 Qt 中的浮动窗口&#xff0c;浮动窗口与工具栏类似&#xff0c;可以停靠在主窗口的上下左右位置&#xff0c;也可以单独拖出来作浮动窗口。 1. QDockWidget方法 方法说明setWidget(QWiget*)用于使浮动窗口能够被添加控件。setAllo…

Web前端之JavaScript的DOM操作冷门API

MENU 前言1、Element.checkVisibility()2、TreeWalker3、Node.compareDocumentPosition()4、scrollIntoViewIfNeeded()5、insertAdjacentElement()6、Range.surroundContents()7、Node.isEqualNode()8、document.createExpression()小结 前言 作为前端开发者&#xff0c;我们每…

【Linux-驱动开发-系统调用流程】

Linux-驱动开发-系统调用流程 ■ Linux-系统调用流程■ Linux-file_operations 结构体 ■ Linux-系统调用流程 ■ Linux-file_operations 结构体 在 Linux 内核文件 include/linux/fs.h 中有个叫做 file_operations 的结构体&#xff0c;此结构体就是 Linux 内核驱动操作函数集…

ToolsSet之:ASCII字符表和国际标准代码表

ToolsSet是微软商店中的一款包含数十种实用工具数百种细分功能的工具集合应用&#xff0c;应用基本功能介绍可以查看以下文章&#xff1a; Windows应用ToolsSet介绍https://blog.csdn.net/BinField/article/details/145898264 ToolsSet中Other菜单下的ASCII Table是一个ASCII…