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>

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

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

相关文章

linux 系统 mysql :8.4.3 主从复制 教程及运维命令

一、环境准备 硬件配置CPU2 核 CPU内存2 GB 内存硬盘30 GB 硬盘容量外网访问服务器可以访问外网软件环境操作系统Anolis OS 7.9MySQL版本8.4.3 二、服务器清单 Master192.168.153.221Node192.168.153.222 三、安装mysql &#xff08;两台机器都要下载&#xff09; # 下载 …

UE5材质节点Camera Vector/Reflection Vector

Camera Vector相机向量&#xff0c;输出像素到相机的方向&#xff0c;结果归一化 会随着相机移动而改变 Reflection Vector 反射向量&#xff0c;物体表面法线反射到相机的方向&#xff0c;x和y和camera vector相反 配合hdr使用

复合机器人正以其高效、精准、灵活的特点,逐渐在汽车装配线上崭露头角

随着全球汽车制造业的快速发展&#xff0c;汽车装配线已成为衡量企业生产效率和技术水平的重要标准。传统的装配方式往往依赖于大量的人工操作&#xff0c;这不仅效率低下&#xff0c;还面临着质量不稳定、安全隐患等问题。然而&#xff0c;随着智能科技的飞速进步&#xff0c;…

导致启动nacos报错Caused by: java.lang.IllegalStateException: No DataSource set 的两种原因

Java资深小白&#xff0c;不足之处&#xff0c;或者有任何错误欢迎指出。 --蓝紫报错代码如下: C:\Windows\System32>cd D:\nacos-server-2.2.3\nacos\binC:\Windows\System32>d:D:\nacos-server-2.2.3\nacos\bin>startup.cmd -m standalone "nacos is starting…

LinuxUbuntu打开VSCode白屏解决方案

解决方法是 以root权限打开VSCode sudo /usr/share/code/code --no-sandbox --unity-launch

C语言期末复习笔记(下)

目录 九、指针 1.指针变量的定义和初始化 2.间接寻址符* 3.按值调用和按址调用 4.实例 5.函数指针 6.指针变量和其它类型变量的对比 十、字符串 1.字符串常量 2.字符串的存储 3.字符指针 4.字符串的访问和输入/输出 5.字符串处理函数 &#xff08;1&#xff09;str…

1、蓝牙打印机环境搭建

本项目采用stm32f103c8T6芯片&#xff0c;通过库函数实现打印功能&#xff0c;并配置有小程序蓝牙通信上位机。 1、创建文件夹目录 core文件夹存放核心库文件 LIB文件夹存放标准库函数文件 这里可以删减&#xff0c;用不到的可以不要。 obj存放编译后的文件 project存放项目…

IJCNN2025 投稿准备

投稿格式要求&#xff1a; IEEE - Manuscript Templates for Conference Proceedings 投稿网址&#xff1a; Conference Management Toolkit - Login

多输入多输出 | Matlab实现WOA-CNN鲸鱼算法优化卷积神经网络多输入多输出预测

多输入多输出 | Matlab实现WOA-CNN鲸鱼算法优化卷积神经网络多输入多输出预测 目录 多输入多输出 | Matlab实现WOA-CNN鲸鱼算法优化卷积神经网络多输入多输出预测预测效果基本介绍模型背景程序设计参考资料 预测效果 基本介绍 Matlab实现WOA-CNN鲸鱼算法优化卷积神经网络多输入…

Leecode刷题C语言之切蛋糕的最小总共开销②

执行结果:通过 执行用时和内存消耗如下&#xff1a; typedef struct {int *booked;int bookedSize; } MyCalendar;#define MAX_BOOK_SIZE 1001MyCalendar* myCalendarCreate() {MyCalendar *obj (MyCalendar *)malloc(sizeof(MyCalendar));obj->booked (int *)malloc(siz…

力扣-数据结构-10【算法学习day.81】

前言 ###我做这类文章一个重要的目的还是给正在学习的大家提供方向&#xff08;例如想要掌握基础用法&#xff0c;该刷哪些题&#xff1f;建议灵神的题单和代码随想录&#xff09;和记录自己的学习过程&#xff0c;我的解析也不会做的非常详细&#xff0c;只会提供思路和一些关…

Vue 全局事件总线:Vue 2 vs Vue 3 实现

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…

基于Spring Boot的电影网站系统

一、技术架构 后端框架&#xff1a;Spring Boot&#xff0c;它提供了自动配置、简化依赖管理、内嵌式容器等特性&#xff0c;使得开发者可以快速搭建起一个功能完备的Web应用。 前端技术&#xff1a;可能采用Vue.js、JS、jQuery、Ajax等技术&#xff0c;结合Element UI等组件库…

DeepSpeed训练得到checkpoint如何像Huggingface模型一样评测evaluation?zero_to_fp32.py有什么用?怎么用?

DeepSpeed训练得到checkpoint如何像Huggingface模型一样评测evaluation&#xff1f; 具体步骤 首先看一个样例&#xff1a; 这是我用open-instruct框架&#xff0c;使用DeepSpeed训练1728个steps得到的一个checkpoint。请注意&#xff0c;下文我演示用的例子是基于step_1152&…

node.js之---子线程(child_process)模块

为什么需要子线程&#xff08;child_process&#xff09;模块 Worker Threads 的基本概念 如何使用 Worker Threads Worker Threads 的性能 Worker 线程的优势和限制 进阶用法&#xff1a;共享内存 为什么需要子线程&#xff08;child_process&#xff09;模块 在 Node.js…

【深度学习基础之多尺度特征提取】多尺度图像增强(Multi-Scale Image Augmentation)是如何在深度学习网络中提取多尺度特征的?附代码

【深度学习基础之多尺度特征提取】多尺度图像增强&#xff08;Multi-Scale Image Augmentation&#xff09;是如何在深度学习网络中提取多尺度特征的&#xff1f;附代码 【深度学习基础之多尺度特征提取】多尺度图像增强&#xff08;Multi-Scale Image Augmentation&#xff0…

鸿蒙应用开发 - 如何去掉字符串中空格

鸿蒙应用开发 - 如何去掉字符串中空格 在鸿蒙应用开发中&#xff0c;如果你使用的是ArkTS&#xff08;Ark TypeScript&#xff09;&#xff0c;可以通过JavaScript或TypeScript内置的字符串方法来去除字符串中的空格。以下是一些常用的方法&#xff1a; trim()&#xff1a;去…

最新版Chrome浏览器加载ActiveX控件之CFCA安全输入控件

背景 CFCA安全输入控件用于保证用户在浏览器、桌面客户端、移动客户端中输入信息的安全性&#xff0c;防止运行在用户系统上的病毒、木马等恶意程序入侵窃取用户输入的敏感信息。确保用户输入、本地缓存、网络传输整个流程中&#xff0c;输入的敏感信息不被窃取。广泛应用于银行…

vSAN手动平衡磁盘

原创作者&#xff1a;运维工程师 谢晋 vSAN手动平衡磁盘 vSAN手动平衡磁盘 vSAN手动平衡磁盘 1、ssh登录到VCSA&#xff0c;然后登录到 Ruby vSphere 控制台 (RVC) # rvc administratorvsphere.local10.10.0.202、切换到计算机命名空间 0 / 1 10.10.0.20/ > cd 1 /10.…

接口测试面试题

接口测试在软件测试中占据重要位置&#xff0c;无论是功能测试还是性能测试&#xff0c;接口的稳定性至关重要。以下总结了一些常见的接口测试面试题&#xff0c;帮助你从容应对面试挑战&#xff01; 面试官常说&#xff1a;“接口测试是测试的重头戏&#xff0c;了解接口的设计…