pdf预览兼容问题- chrome浏览器105及一下预览不了
使用的"@tato30/vue-pdf": "^1.11.2"预览插件,发现chrome浏览器105及一下预览不了
pdfPreview预览组件:
<template><div id="vue_pdf_view"><div class="tool_tip"><template v-if="pages > 0 && props.previewMode === 'pagination'"><button @click="page = page > 1 ? page - 1 : page">上一页</button><span>{{ page }} / {{ pages }}</span><button @click="page = page < pages ? page + 1 : page">下一页</button></template><button @click="handleWord" v-if="fetchWordApi && uniEventId">下载word</button><button @click="handlePdf" v-if="src && uniEventId">下载PDF</button></div><template v-if="!props.loading && props.previewMode === 'scroll'"><div v-for="page in pages" :key="page" class="page"><VuePDF :pdf="pdf" :page="page" :scale="scale" /></div></template><template v-else-if="!props.loading && props.previewMode === 'pagination'"><VuePDF :pdf="pdf" :page="page" /></template><template v-else><Spin style="padding-top: 50px"></Spin></template></div>
</template><script setup>
import { onMounted, ref } from 'vue';
import { VuePDF, usePDF } from '@tato30/vue-pdf';
import { Spin } from 'ant-design-vue';
import { saveAs } from 'file-saver';const props = defineProps({src: {type: String,},fetchWordApi: {type: Function,},uniEventId: {type: String,},previewMode: {// 'pagination','scroll'type: String,default: 'scroll',},loading: {type: Boolean,default: false,},
});const page = ref(1);
const testSrc ='https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf';
const { src, fetchWordApi, uniEventId } = props;
const { pdf, pages } = usePDF(src);
const scale = ref(1.5);
const handleWord = () => {fetchWordApi &&fetchWordApi('docx', { uniEventId }, true).then((res) => {const blob = new Blob([res], { type: 'application/msword' });saveAs(blob, uniEventId + '.docx');});
};const handlePdf = () => {if (!src || !uniEventId) return;saveAs(src, uniEventId + '.pdf');
};
</script><style lang="scss">
#vue_pdf_view {min-height: 1000px;width: 100%;position: relative;display: flex;flex-direction: column;justify-content: center;align-items: center;&:hover {.tool_tip {opacity: 1;}}.tool_tip {opacity: 0;position: sticky;top: 40px;left: 0;background-color: rgba(0, 0, 0, 0.5);z-index: 1;padding: 4px 0;border-radius: 4px;width: fit-content;button {padding: 0 10px;&:hover {color: #555;}}}.page {padding-bottom: 10px;}
}
</style>
使用:
<pdfPreview:loading="loading":key="loading":src="iframeUrl"previewMode="scroll"></pdfPreview>
解决:直接使用iframe的src嵌套pdf即可解决兼容问题
<iframe:src="`${iframeUrl}#toolbar=0`"width="100%"height="800px"frameBorder="0"scrolling="no"v-if="loading"></iframe>
相关文章:
pdf预览兼容问题- chrome浏览器105及一下预览不了
使用的"tato30/vue-pdf": "^1.11.2"预览插件,发现chrome浏览器105及一下预览不了 pdfPreview预览组件: <template><div id"vue_pdf_view"><div class"tool_tip"><template v-if"pa…...
【可实战】需求分析-测试计划↓-测试设计-测试执行-测试总结↓(包含测试计划、测试总结模板,以公司要求为准)
一、完成软件测试工作的必要步骤 需求分析-测试计划-测试设计-测试执行-测试总结 二、测试计划 (一)测试计划模版 模板在线查看: https://docs.qq.com/doc/DV2hTamxJWnNDaUFF 模板(百度网盘): 链接&…...
MySQL 03 章——基本的SELECT语句
一、SQL概述 (1)SQL背景知识 SQL(Structured Query Language,结构化查询语言)是使用关系模型的数据库应用语言,与数据直接打交道不同的数据库管理系统生产厂商都支持SQL语句,但都有特有内容 …...
【项目】智能BI洞察引擎 测试报告
目录 一、项目背景BI介绍问题分析项目背景 二、项目功能三、功能测试1、登录测试测试用例测试结果 2、注册测试测试用例测试结果出现的bug 3、上传文件测试测试用例测试结果 4、AI生成图表测试测试用例测试结果 5、分析数据页面测试(异步)测试用例测试结…...
javaEE-文件操作和IO-文件
目录 一.什么是文件 1.文件就是硬盘(磁盘)上的文件。 2.计算机中存储数据的设备: 3.硬盘的物理特征 4.树型结构组织和⽬录 5.文件路径 文件路径有两种表示方式: 6.文件的分类 二、java中文件系统的操作 1.File类中的属性: 2.构造方…...
2025跨年倒计时
<!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>2025年跨年倒计时</title><style>/* 页…...
下载mysql免安装版和配置
1、下载地址 点击去官网下载https://downloads.mysql.com/archives/community/ 2、解压安装mysql 解压的文件夹是没有my.ini文件和data目录,需要我们自己去创建 根目录下创建my.ini,根目录创建data [mysql] default-character-setutf8[mysqld] #端口 po…...
代码模板-C语言常用的errno的名字、值以及对应关系?转换字符串函数?(errno.h, strerror; errno -l; man errno)
背景 errno.h是C 编程语言标准库中的头文件。它定义了使用符号errno (“错误号”的缩写)报告和检索错误情况的宏。经常需要用来在内核态用户态返回错误寻找,本文以供快速检索。 常用函数与用法 strerror 根据errno获取文件 比如ÿ…...
全新免押租赁系统助力商品流通高效安全
内容概要 全新免押租赁系统的推出,可以说是一场商品流通领域的小革命。想象一下,不再为押金烦恼,用户只需通过一个简单的信用评估,就能快速租到所需商品,这种体验简直令人惊喜!这个系统利用代扣支付技术&a…...
5.微服务灰度发布落地实践(rocketmq增强)
文章目录 前言发送端灰度增强订阅端灰度增强 前言 上一篇分析了,在灰度发布实现中为什么要对消息队列灰度发布进行增强。本篇主要介绍如何实现rocketmq 灰度发布的增强. 发送端灰度增强 订阅端灰度增强...
MySql核心面试面试问题解析
MySql核心面试面试问题解析 有时候往往简单的才是最容易失分的!!! MySQL支持哪些存储引擎?有何区别? 答案:常见的存储引擎有InnoDB、MyISAM、Memory等。InnoDB支持事务,MyISAM不支持事务&#x…...
logback之自定义pattern使用的转换器
目录 (1)场景介绍 (2)定义转换器BizCallerConverter (3)logback配置conversionRule (4)测试效果 前文《logback之pattern详解以及源码分析》已经介绍了pattern,以及…...
【MySQL】发展起源与核心架构组件详细介绍
🐇明明跟你说过:个人主页 🏅个人专栏:《MySQL技术精粹》🏅 🔖行路有良友,便是天堂🔖 目录 一、引言 1、MySQL起源背景 2、MySQL发展里程 3、MySQL应用场景 二、MySQL的核心特…...
uni-app 多平台分享实现指南
uni-app 多平台分享实现指南 在移动应用开发中,分享功能是一个非常常见的需求,尤其是在社交媒体、营销活动等场景中。使用 uni-app 进行多平台开发时,可以通过一套代码实现跨平台的分享功能,涵盖微信小程序、H5、App 等多个平台。…...
Spring中的IOC是什么,优缺点有哪些?
目录 IOC的核心概念 IOC的优点 IOC的缺点 使用场景说明 总结 IOC(控制反转)是一种设计思想,用于实现低耦合、高内聚的软件架构。它通过将对象的创建和依赖管理交给外部容器来实现,从而减少对象之间的直接依赖关系。 IOC的核…...
Qt实现使用TCP与RS485串口设备通信————附带详细实践方法
文章目录 0 背景1 协议介绍1.1 modbusRTU协议1.1.1 简介1.1.2 RS485和modbusRTU的关系1.1.3 modbusRTU 协议格式1.1.3.1 0x10写多个保持寄存器1.1.3.2 0x02读多个离散输入寄存器1.1.3.3 0x03读多个保持寄存器1.1.3.4 0x04读多个输入寄存器 1.2 ModbusTCP协议1.2.1 ModbusTCP协议…...
js将object整个实体对象作为参数传递
①将object实体转化成json字符串传递: JSON.stringify(obj) ②将json字符串转化成JSON对象值:JSON.parse(json) 实际应用: <div id"div_notice" stylefont-size:14px; width:100%; height:200px; overflow-y:auto;></di…...
超越局部损失函数的预测-优化方法
1 文章信息 文章名为Leaving the Nest : Going Beyond Local Loss Functions for Predict-Then-Optimize。发表在第38届AAAI Conference on Artificial Intelligence. 作者来自哈佛大学。 2 摘要 预测-优化是一种利用机器学习在不确定性下进行决策的方法框架。其核心研究问…...
PDF预览插件
PDF预览插件 可用于当前页面弹窗形式查看,可增加一些自定义功能 pdf预览插件 代码块: pdfobject.js <div class="pdfwrap"><div class="item"><h3>笑场</h3><div class="tags"><p>李诞</p><i&…...
node.js之---CommonJS 模块
CommonJS概念 在 Node.js 中,CommonJS 是一种模块化规范,它定义了如何在 JavaScript 中创建和使用模块。CommonJS 是 Node.js 使用的默认模块系统。它让开发者能够分离代码,便于重用和维护。 CommonJS 模块的基本特性 模块导出 在 CommonJ…...
京东 SPU/SKU 数据接口全解读:商品详情 API 文档(2026 最新版)
京东商品详情 API 体系以SPU(标准产品单元)聚合、SKU(库存单元)明细为核心设计,覆盖商家开放平台(JOS)、京东联盟两大核心场景,支持单品 / 批量查询、全字段 / 指定字段返回…...
OpenClaw+Qwen3.5-9B:技术文档翻译与本地化自动化
OpenClawQwen3.5-9B:技术文档翻译与本地化自动化 1. 为什么选择这个技术组合? 去年参与一个开源项目时,我遇到了文档本地化的难题。项目文档有300多页Markdown文件,需要翻译成5种语言。传统翻译工具要么破坏格式,要么…...
OpenClaw跨平台控制:Kimi-VL-A3B-Thinking远程执行多模态任务方案
OpenClaw跨平台控制:Kimi-VL-A3B-Thinking远程执行多模态任务方案 1. 为什么需要跨平台远程控制? 上周五晚上11点,我正躺在沙发上刷手机,突然想起有个紧急的竞品分析报告需要处理。电脑在书房,实在懒得起身。这时我意…...
Windows苹果设备驱动终极指南:3分钟搞定iPhone/iPad连接难题
Windows苹果设备驱动终极指南:3分钟搞定iPhone/iPad连接难题 【免费下载链接】Apple-Mobile-Drivers-Installer Powershell script to easily install Apple USB and Mobile Device Ethernet (USB Tethering) drivers on Windows! 项目地址: https://gitcode.com/…...
收藏备用|小白/程序员必看!Agentic AI时代,手把手教你构建高效可靠AI Agent
在Agentic AI飞速迭代的当下,AI Agent已成为大模型落地的核心载体,不少小白程序员和入行开发者都想抓住这一风口,但常常陷入“不知从何下手”的困境。本文将从实操角度,详细拆解构建可靠高效AI Agent应用的全流程,核心…...
OpenClaw爆火!Token是什么?一文搞懂这个AI核心概念!
随着龙虾OpenClaw这几天的爆火,token也成了高频词。“养龙虾”并不是免费的,OpenClaw需要接入大模型,平时各种操作都要消耗token 最近网上还有一个很好笑的梗:用自己的脑子思考不会消耗token那么token究竟是什么?我在O…...
GD32F407标准库工程创建全流程:从官网固件库下载到Keil5编译通过
GD32F407标准库工程创建全流程:从官网固件库下载到Keil5编译通过 第一次接触GD32F407开发板时,最让人头疼的就是如何快速搭建开发环境。与STM32不同,GD32的官方资源分散,标准库文件结构复杂,新手很容易在文件复制和工程…...
TCP/IP协议族与网络体系结构实战解析
1. 计算机网络体系结构解析计算机网络体系结构是理解整个互联网通信的基础框架。目前主流的体系结构有三种:OSI七层模型、TCP/IP四层模型和教学用的五层模型。作为一名从业十年的网络工程师,我发现在实际工作中TCP/IP四层模型的应用最为广泛。OSI七层模型…...
2026 AI 智能体工程化深度解析:从词元逻辑到高可用链路构建
进入 2026 年,大语言模型(LLM)的竞争已从单纯的“模型智力”转向了“工程化落地能力”。对于开发者而言,AI 不再仅仅是一个对话框,而是一个能够自主调用工具、处理复杂逻辑的智能体(Agent)。在这…...
多图拼长条与宫格拼接批处理备忘
手头有一批产品白底图,需要批量产出两类物料:一类是横向四连图做详情对比,一类是 22 宫格做缩略封面。统一用【批量图片拼接工具】走完,下面只记参数组合和踩坑点,不写实现细节。输入侧是「主文件夹」路径,…...
