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

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"预览插件&#xff0c;发现chrome浏览器105及一下预览不了 pdfPreview预览组件&#xff1a; <template><div id"vue_pdf_view"><div class"tool_tip"><template v-if"pa…...

【可实战】需求分析-测试计划↓-测试设计-测试执行-测试总结↓(包含测试计划、测试总结模板,以公司要求为准)

一、完成软件测试工作的必要步骤 需求分析-测试计划-测试设计-测试执行-测试总结 二、测试计划 &#xff08;一&#xff09;测试计划模版 模板在线查看&#xff1a; https://docs.qq.com/doc/DV2hTamxJWnNDaUFF 模板&#xff08;百度网盘&#xff09;&#xff1a; 链接&…...

MySQL 03 章——基本的SELECT语句

一、SQL概述 &#xff08;1&#xff09;SQL背景知识 SQL&#xff08;Structured Query Language&#xff0c;结构化查询语言&#xff09;是使用关系模型的数据库应用语言&#xff0c;与数据直接打交道不同的数据库管理系统生产厂商都支持SQL语句&#xff0c;但都有特有内容 …...

【项目】智能BI洞察引擎 测试报告

目录 一、项目背景BI介绍问题分析项目背景 二、项目功能三、功能测试1、登录测试测试用例测试结果 2、注册测试测试用例测试结果出现的bug 3、上传文件测试测试用例测试结果 4、AI生成图表测试测试用例测试结果 5、分析数据页面测试&#xff08;异步&#xff09;测试用例测试结…...

javaEE-文件操作和IO-文件

目录 一.什么是文件 1.文件就是硬盘(磁盘)上的文件。 2.计算机中存储数据的设备&#xff1a; 3.硬盘的物理特征 4.树型结构组织和⽬录 5.文件路径 文件路径有两种表示方式&#xff1a; 6.文件的分类 二、java中文件系统的操作 1.File类中的属性&#xff1a; 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目录&#xff0c;需要我们自己去创建 根目录下创建my.ini&#xff0c;根目录创建data [mysql] default-character-setutf8[mysqld] #端口 po…...

代码模板-C语言常用的errno的名字、值以及对应关系?转换字符串函数?(errno.h, strerror; errno -l; man errno)

背景 errno.h是C 编程语言标准库中的头文件。它定义了使用符号errno &#xff08;“错误号”的缩写&#xff09;报告和检索错误情况的宏。经常需要用来在内核态用户态返回错误寻找&#xff0c;本文以供快速检索。 常用函数与用法 strerror 根据errno获取文件 比如&#xff…...

全新免押租赁系统助力商品流通高效安全

内容概要 全新免押租赁系统的推出&#xff0c;可以说是一场商品流通领域的小革命。想象一下&#xff0c;不再为押金烦恼&#xff0c;用户只需通过一个简单的信用评估&#xff0c;就能快速租到所需商品&#xff0c;这种体验简直令人惊喜&#xff01;这个系统利用代扣支付技术&a…...

5.微服务灰度发布落地实践(rocketmq增强)

文章目录 前言发送端灰度增强订阅端灰度增强 前言 上一篇分析了&#xff0c;在灰度发布实现中为什么要对消息队列灰度发布进行增强。本篇主要介绍如何实现rocketmq 灰度发布的增强. 发送端灰度增强 订阅端灰度增强...

MySql核心面试面试问题解析

MySql核心面试面试问题解析 有时候往往简单的才是最容易失分的&#xff01;&#xff01;&#xff01; MySQL支持哪些存储引擎&#xff1f;有何区别&#xff1f; 答案&#xff1a;常见的存储引擎有InnoDB、MyISAM、Memory等。InnoDB支持事务&#xff0c;MyISAM不支持事务&#x…...

logback之自定义pattern使用的转换器

目录 &#xff08;1&#xff09;场景介绍 &#xff08;2&#xff09;定义转换器BizCallerConverter &#xff08;3&#xff09;logback配置conversionRule &#xff08;4&#xff09;测试效果 前文《logback之pattern详解以及源码分析》已经介绍了pattern&#xff0c;以及…...

【MySQL】发展起源与核心架构组件详细介绍

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《MySQL技术精粹》&#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、MySQL起源背景 2、MySQL发展里程 3、MySQL应用场景 二、MySQL的核心特…...

uni-app 多平台分享实现指南

uni-app 多平台分享实现指南 在移动应用开发中&#xff0c;分享功能是一个非常常见的需求&#xff0c;尤其是在社交媒体、营销活动等场景中。使用 uni-app 进行多平台开发时&#xff0c;可以通过一套代码实现跨平台的分享功能&#xff0c;涵盖微信小程序、H5、App 等多个平台。…...

Spring中的IOC是什么,优缺点有哪些?

目录 IOC的核心概念 IOC的优点 IOC的缺点 使用场景说明 总结 IOC&#xff08;控制反转&#xff09;是一种设计思想&#xff0c;用于实现低耦合、高内聚的软件架构。它通过将对象的创建和依赖管理交给外部容器来实现&#xff0c;从而减少对象之间的直接依赖关系。 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字符串传递&#xff1a; JSON.stringify(obj) ②将json字符串转化成JSON对象值&#xff1a;JSON.parse(json) 实际应用&#xff1a; <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 中&#xff0c;CommonJS 是一种模块化规范&#xff0c;它定义了如何在 JavaScript 中创建和使用模块。CommonJS 是 Node.js 使用的默认模块系统。它让开发者能够分离代码&#xff0c;便于重用和维护。 CommonJS 模块的基本特性 模块导出 在 CommonJ…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

STM32---外部32.768K晶振(LSE)无法起振问题

晶振是否起振主要就检查两个1、晶振与MCU是否兼容&#xff1b;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容&#xff08;CL&#xff09;与匹配电容&#xff08;CL1、CL2&#xff09;的关系 2. 如何选择 CL1 和 CL…...

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...

【安全篇】金刚不坏之身:整合 Spring Security + JWT 实现无状态认证与授权

摘要 本文是《Spring Boot 实战派》系列的第四篇。我们将直面所有 Web 应用都无法回避的核心问题&#xff1a;安全。文章将详细阐述认证&#xff08;Authentication) 与授权&#xff08;Authorization的核心概念&#xff0c;对比传统 Session-Cookie 与现代 JWT&#xff08;JS…...

Visual Studio Code 扩展

Visual Studio Code 扩展 change-case 大小写转换EmmyLua for VSCode 调试插件Bookmarks 书签 change-case 大小写转换 https://marketplace.visualstudio.com/items?itemNamewmaurer.change-case 选中单词后&#xff0c;命令 changeCase.commands 可预览转换效果 EmmyLua…...

实战设计模式之模板方法模式

概述 模板方法模式定义了一个操作中的算法骨架&#xff0c;并将某些步骤延迟到子类中实现。模板方法使得子类可以在不改变算法结构的前提下&#xff0c;重新定义算法中的某些步骤。简单来说&#xff0c;就是在一个方法中定义了要执行的步骤顺序或算法框架&#xff0c;但允许子类…...

ubuntu中安装conda的后遗症

缘由: 在编译rk3588的sdk时&#xff0c;遇到编译buildroot失败&#xff0c;提示如下&#xff1a; 提示缺失expect&#xff0c;但是实测相关工具是在的&#xff0c;如下显示&#xff1a; 然后查找借助各个ai工具&#xff0c;重新安装相关的工具&#xff0c;依然无解。 解决&am…...

【Java多线程从青铜到王者】单例设计模式(八)

wait和sleep的区别 我们的wait也是提供了一个还有超时时间的版本&#xff0c;sleep也是可以指定时间的&#xff0c;也就是说时间一到就会解除阻塞&#xff0c;继续执行 wait和sleep都能被提前唤醒(虽然时间还没有到也可以提前唤醒)&#xff0c;wait能被notify提前唤醒&#xf…...