pdf预览兼容问题- chrome浏览器105及一下预览不了

news/2025/1/7 14:43:05/

使用的"@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.ppmy.cn/news/1560925.html

相关文章

深度学习YOLOv3压双黄线期末项目

一、引言 实现功能 目录 一、引言 实现功能 打开视频 连续检测车辆 能检测到道路中间的双黄线 能检测出车辆是否压双黄线 当车辆压到双黄线时给出提示 要求使用多线程实现功能 二、技术栈概览 三、代码功能深度剖析 视频文件选择功能(choosevideo 函数) 四、项目亮点提炼 五…

python 实现贪心算法(Greedy Algorithm)

贪心算法&#xff08;Greedy Algorithm&#xff09;是一种在每一步选择中都采取当前最优的选择&#xff0c;希望通过局部最优解达到全局最优解的算法设计方法。以下是使用Python实现贪心算法解决几个经典问题的示例&#xff1a; 1. 活动选择问题&#xff08;Activity Selection…

太速科技-754-基于Agilex™ 7 FPGA F 系列的PCIe4.0X16 加速卡

基于Agilex™ 7 FPGA F 系列的PCIe4.0X16 加速卡 一、板卡概述 Agilex™ 7 FPGA 开发套件提供了一个硬件开发平台&#xff0c;用于评估具有两个 F-Tile 的 Agilex™ 7 FPGA F 系列的性能和特性。这是一款 PCIe 外形的通用评估板&#xff0c;具有 HPS 硬件功能。 使用 Agilex™…

VSCode 插件开发实战(十六):详解插件生命周期

前言 VSCode 它不仅功能强大&#xff0c;而且可以通过插件进行扩展&#xff0c;以满足不同开发者的需求。那么&#xff0c;VSCode 自定义插件的生命周期是如何运行的呢&#xff1f;今天我们就用通俗易懂的方式来讲解一下。 什么是 VSCode 插件&#xff1f; VSCode 插件是用来…

WinForm开发-自定义组件-1. 工具栏: UcompToolStrip

这里写自定义目录标题 1. 工具栏: UcompToolStrip1.1 展示效果1.2 代码UcompToolStrip.csUcompToolStrip.Designer.cs 1. 工具栏: UcompToolStrip 自定义一些Winform组件 1.1 展示效果 1&#xff09;使用效果 2&#xff09;控件事件 1.2 代码 设计 编码 UcompToolStrip.…

c++ vector 使用find查找指定元素方法

在 C 中&#xff0c;std::vector 是一个动态数组&#xff0c;用于存储同类型元素的序列。如果你想在 std::vector 中查找指定元素&#xff0c;可以使用 std::find 算法。std::find 是定义在 <algorithm> 头文件中的标准库函数。 以下是一个示例代码&#xff0c;展示了如…

Elasticsearch Serverless中的数据流自动分片深度解析

Elasticsearch Serverless中的数据流自动分片深度解析 一、Elasticsearch Serverless概述 1. 什么是Elasticsearch Serverless Elasticsearch Serverless是一种云端全托管的Elasticsearch服务&#xff0c;它基于云原生Serverless技术架构&#xff0c;提供自动弹性和完全免运…

PyTorch快速入门教程【小土堆】之全连接层

视频地址神经网络-线性层及其他层介绍_哔哩哔哩_bilibili 视频中称为线性层 import torch import torchvision from torch import nn from torch.nn import Linear from torch.utils.data import DataLoaderdataset torchvision.datasets.CIFAR10("CIFAR10", trai…