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.pswp.cn/web/64799.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/64799.shtml
英文地址,請注明出處:http://en.pswp.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;了解接口的設計…