当前位置: 首页 > 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>

http://www.lryc.cn/news/514182.html

相关文章:

  • 【可实战】需求分析-测试计划↓-测试设计-测试执行-测试总结↓(包含测试计划、测试总结模板,以公司要求为准)
  • MySQL 03 章——基本的SELECT语句
  • 【项目】智能BI洞察引擎 测试报告
  • javaEE-文件操作和IO-文件
  • 2025跨年倒计时
  • 下载mysql免安装版和配置
  • 代码模板-C语言常用的errno的名字、值以及对应关系?转换字符串函数?(errno.h, strerror; errno -l; man errno)
  • 全新免押租赁系统助力商品流通高效安全
  • 5.微服务灰度发布落地实践(rocketmq增强)
  • MySql核心面试面试问题解析
  • logback之自定义pattern使用的转换器
  • 【MySQL】发展起源与核心架构组件详细介绍
  • uni-app 多平台分享实现指南
  • Spring中的IOC是什么,优缺点有哪些?
  • Qt实现使用TCP与RS485串口设备通信————附带详细实践方法
  • js将object整个实体对象作为参数传递
  • 超越局部损失函数的预测-优化方法
  • PDF预览插件
  • node.js之---CommonJS 模块
  • 关于AI面试系统2025年趋势评估!
  • SQL—替换字符串—replace函数用法详解
  • 《Vue3实战教程》40:Vue3安全
  • 软件项目验收测试需进行哪些测试?软件检测机构分享验收测试作用
  • css实现文字描边
  • (二)当人工智能是一个函数,函数形式怎么选择?ChatGPT的函数又是什么?
  • 数据挖掘——回归算法
  • AIGC与未来的通用人工智能(AGI):从生成内容到智能革命
  • jQuery学习笔记3
  • SpringMVC(六)拦截器
  • 单区域OSPF配置实验