当前位置: 首页 > news >正文

vue-pdf 单列显示多个pdf页面

<template><div><pdfv-for="i in numPages":key="i":src="src":page="i"style="display: inline-block; width: 100%"></pdf>
<!-- 宽度设置100% 一行只展示一页 --></div>
</template>
<script>
import pdf from "vue-pdf";
var loadingTask = pdf.createLoadingTask("/static/clause.pdf"
);
export default {data() {return { src: loadingTask, numPages: undefined };},components: {pdf,},mounted() {this.src.promise.then((pdf) => {this.numPages = pdf.numPages;});},
};
</script><template><div><pdfv-for="i in numPages":key="i":src="src":page="i"style="display: inline-block; width: 100%"></pdf></div>
</template>
<script>
import pdf from "vue-pdf";
var loadingTask = pdf.createLoadingTask("/static/clause.pdf"
);
export default {data() {return { src: loadingTask, numPages: undefined };},components: {pdf,},mounted() {this.src.promise.then((pdf) => {this.numPages = pdf.numPages;});},
};
</script>

注意:文件要放在public文件夹下,不然会报错:如果文件放在远程服务器上,则直接写远程地址

Warning: Ignoring invalid character "33" in hex string'

原因:读取 PDF 文件时,路径不合法,导致读取不到文件; 在 vue-cli3 脚手架搭建的项目中,读取本地的 PDF 文件需要放到 public 文件夹中,在引用时,不能使用相对路径,且‘/’即表示 public 文件夹 (需略去 public);

相关文章:

vue-pdf 单列显示多个pdf页面

<template><div><pdfv-for"i in numPages":key"i":src"src":page"i"style"display: inline-block; width: 100%"></pdf> <!-- 宽度设置100% 一行只展示一页 --></div> </template&g…...

2023年FPGA好就业吗?

FPGA岗位有哪些&#xff1f; 从芯片设计流程来看&#xff0c;FPGA岗位可以分四类 产品开发期&#xff1a;FPGA系统架构师 芯片设计期&#xff1a;数字IC设计工程师、FPGA开发工程师 芯片流片期&#xff1a;FPGA验证工程师 产品维护期&#xff1a;FAE工程师 从行业上来说&#x…...

【业务功能篇52】Springboot+mybatis mysql开启批量执行sql参数 allowMultiQueries=true

allowMultiQueriestrue参数的作用&#xff1a; 可以在sql语句后携带分号&#xff0c;实现多语句执行。可以执行批处理&#xff0c;同时发出多个SQL语句。 在application-xxx.xml配置文件中&#xff0c;配置数据库的信息 spring:datasource:dynamic:primary: mysqldb # 默认数…...

StableDiffusion 换脸实现

先看效果&#xff1a; 想要换的脸&#xff1a; 想要把脸放到的目标图片&#xff1a; 实现方案&#xff1a; StableDiffusionroop&#xff08;本次实验基于roopV0.02版本&#xff09; 1/安装SD&#xff0c;模型选择 DreamShaper,Sampler使用 Euler a 2/安装roop插件 roop插…...

直播平台源码开发提高直播质量的关键:视频编码和解码技术

在互联网日益发展的今天&#xff0c;直播平台成为人们互联网生活的主力军&#xff0c;直播平台功能的多样化与智能化使我们的生活有了极大地改变&#xff0c;比如短视频功能&#xff0c;它让我们既可以随时随地去发布自己所拍摄到的东西让世界各地的用户看到&#xff0c;也能让…...

如何使用 PHP 更新数据到数据库?

首先&#xff0c;你需要有个数据库&#xff0c;对吧&#xff1f;如果你还没有的话&#xff0c;可以用PHP的MySQL扩展来创建一个。不过&#xff0c;在此之前&#xff0c;你需要确保你的服务器已经安装了MySQL&#xff0c;并且你的PHP环境已经支持MySQL扩展。 好了&#xff0c;现…...

NLP masked_tokens[]、token_masks[]是什么?

1、masked_tokens[]、token_masks[]介绍 masked_tokens和token_masks两个列表用于存储mask处理后的token&#xff08;分词&#xff09;结果和对应的mask标志。 masked_tokens列表存储经过mask处理后的分词结果。 token_masks列表存储与每个分词结果对应的mask标志。 2、示例…...

aoa_android工程编译注意事项

1. android studio 版本 &#xff1a; 3.0.0 Android Studio 下载文件归档 | Android 开发者 | Android Developers (google.cn) 下载地址&#xff1a; https://redirector.gvt1.com/edgedl/android/studio/install/3.0.0.18/android-studio-ide-171.4408382-windows.ex…...

java篇 类的进阶0x06:可见性修饰符(访问修饰符)

文章目录 可见性修饰符&#xff08;访问修饰符&#xff09;成员变量都应该是 private构造方法可以是 private 的public 修饰的东西尽量不要改动非 public 的类&#xff0c;类名可以不和文件名相同protected 继承专属的访问控制 可见性修饰符&#xff08;访问修饰符&#xff09;…...

Java 贪心算法经典问题解决

文章目录 分金条题目思路代码实现测试用例以及结果输出 花费资金做项目最大收益题目思路代码实现测试用例以及结果输出 预定会议室题目思路代码实现测试用例以及结果输出 取中位数题目思路代码实现测试用例以及结果输出 最低字典序题目思路代码实现测试用例以及结果输出 结语 分…...

所有docker命令无效,解决办法

目录 ■前言 今天使用docker时&#xff0c;所有命令无效 ■解决办法如下 1.停止docker服务 2.查看状态 3.删除之前的docker相关的文件 4.再次查看状态 5.使用相关命令 &#xff08;好用了&#xff09; 6.重新下载镜像 ■前言 今天使用docker时&#xff0c;所有命令无…...

系列一、创建者模式

一、概述 创建者模式的主要关注点是"怎样创建对象?"&#xff0c;它的主要特点是"将对象的创建与使用分离"。这样可以降低系统的耦合度&#xff0c;使用者不需要关注对象的创建细节。 二、分类 单例模式工厂方法模式抽象工厂模式原型模式建造者模式...

数据库系列:覆盖索引和规避回表

1 介绍 在MySQL数据库查询过程中&#xff0c;索引覆盖和避免不必要的回表&#xff0c;是减少检索步骤&#xff0c;提高执行效率的有效手段。下面从这两个角度分析如何进行MySQL检索提效。 2 数据准备 模拟一个500w数据容量的部门表 emp&#xff0c;表结构如下&#xff0c;并…...

java Spring Boot上线运维 启动jar时控制台调整零时变量

前面的文章 java 打包Spring Boot项目&#xff0c;并运行在windows系统中和将Spring Boot项目打包部署到阿里云linux服务器讲述了Spring Boot项目打包部署的过程 但是 这里 我们可能会遇到一种情况 此时 我们服务器 java项目占用了 80端口 但我们需要放上去一个更重要的东西&am…...

java后端校验

Java 后端数据校验 一、概述 当我们想提供可靠的 API 接口&#xff0c;对参数的校验&#xff0c;以保证最终数据入库的正确性&#xff0c;是 必不可少 的活。比如下图就是 我们一个项目里 新增一个菜单校验 参数的函数&#xff0c;写了一大堆的 if else 进行校验&#xff0c;…...

PowerPoint如何修改“默认保存路径”?

很多时候&#xff0c;我们做好PPT后都要保存&#xff0c;一般会保存在创建PPT的文件夹里&#xff0c;或者另外设置保存的路径。 如果经常需要制作PPT&#xff0c;又不想每次都要重新选择保存位置&#xff0c;我们可以创建或修改“默认保存路径”&#xff0c;这样每次关闭PPT后…...

【PMP】有没有项目经理能看得懂这九张图?求挑战

这九张图&#xff0c;全是圈圈我的肺腑之言啊&#xff01;谁痛谁知道&#xff01; 做技术时&#xff0c;就想着30岁就转管理&#xff0c;管理岗位赚得多&#xff0c;结果发现全是烟雾弹。 做技术和代码打交道&#xff0c;做管理跟人打交道。天天开不完的会、说不完的话&#xf…...

ES6学习记录—自己记录一直更新版

1. 什么是ECMA 全称&#xff1a;European computer manufacturers association欧洲计算机制造联合会; 2、它的标准名单中的&#xff1a;ECMA — 262脚本语言的规范&#xff1a;规范化脚本语言&#xff0c;叫ECMAScript ( 一定要记住)&#xff1b;像ES5 ES6就是这样来的&#xf…...

linux操作gpio的一些记录

在linux里面使用GPIO的一些知识点记录如下&#xff1a; 一、驱动里面操作GPIO 在linux内核里面如果 pinctrl 子系统将一个 PIN 复用为 GPIO 的话&#xff0c;那么就可以用gpio 子系统提供的 API 函数操做gpio&#xff0c;比如设置 GPIO为输入输出&#xff0c;读取 GPIO 的值等…...

目前新能源汽车充电桩的发展受到哪些不利因素的影响?

目前新能源汽车充电桩的发展受到哪些不利因素的影响? 一是安装难&#xff0c;很多老旧小区没有充电桩配套施工规范&#xff0c;充电桩建设比较难&#xff0c;受到充电容量不足电表箱供电等局限性的制约&#xff0c;同时缺乏充电桩配套设施的统一规划&#xff0c;小区内只能安装…...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

多模态大语言模型arxiv论文略读(108)

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

代码规范和架构【立芯理论一】(2025.06.08)

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制&#xff0c;展现出显著的技术优势&#xff1a; 深层组织穿透能力&#xff1a;适用于活体组织深度成像 高分辨率观测性能&#xff1a;满足微观结构的精细研究需求 低光毒性特点&#xff1a;减少对样本的损伤…...