vue項目預覽pdf隱藏工具欄和側邊欄

1.在預覽PDF時,PDF查看器通常會顯示工具欄、側邊欄等控件。如果想隱藏這些控件,可以通過在PDF文件的URL中添加參數來實現。可以使用#toolbar=0和#navpanes=0等參數來隱藏工具欄和側邊欄。

解釋:
#toolbar=0:隱藏工具欄。

#navpanes=0:隱藏側邊欄。

其他常用參數:
#view=FitH:將PDF頁面寬度適應iframe的寬度。

#scrollbar=0:隱藏滾動條(如果有)。

說一下重點:

問題一: 通過命令pnpm install pdf.js安裝后,通常出現引用問題;Cannot resolve pdf.worker.entry。代碼中使用的版本"pdfjs-dist": "^5.2.133"

解決方案:

將文件從node_modules/pdfjs-dist/build/pdf.worker.min.mjs移動至項目的public/pdf.worker.min.mjs,可以使用命令 cp node_modules/pdfjs-dist/build/pdf.worker.min.mjs public/pdf.worker.min.mjs

修改引用:
import * as pdfjsLib from 'pdfjs-dist';

pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.mjs'

ps: 上面的代碼中包含了文件的下載功能,需要安裝 "file-saver": "^2.0.5",

2. 線上環境大部分pdf預覽都沒有問題,但是有個別pdf文件里面的內容顯示不全,缺胳膊少腿,不是這個字沒顯示出來就是那個字丟了的(本地還是沒有問題)
解決方法:在網上找了一下,也有人遇到類似問題,原因是缺少相應字體 ,需要在界面上引入CMapReaderFactory,然后把url傳進去生成新的路徑賦值給this.pdfSrc,就可以解決

import pdf from 'vue-pdf'
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory'

let loadingTask = pdf.createLoadingTask({
url: URL.createObjectURL(blob),
cMapPacked: true,
CMapReaderFactory
})
this.pdfSrc = loadingTask;

3. 當我們使用上個問題中的CMapReaderFactory時,會引發另外一個問題,就是預覽的時候顯示空白的問題,顯示不全有空白頁,控制臺還不報錯
我也去網上找了相關問題的解決方法,有人說是因為緩存問題,第二次加載時取的是初次加載PDF文件時的語言文件的loadModules的緩存,但是取的過程中導致了失敗,返回了空值,修改的時候只需要加上一段話

4. 打包部署到服務器上后,預覽時死活看不到內容,控制器不報錯,就是空白,本地開發也沒問題
這個問題啥招我都試了,我同時做管理端以及門戶端,都需要預覽pdf,用的都是vue-pdf,代碼邏輯一模一樣,而且后臺接口也一模一樣,門戶端開發環境和部署環境一點問題都沒有,管理端開發環境沒問題部署完以后到線上就是不展示內容,這個問題我改了一天,沒辦法在本地測試,只能改一點發給現場一個包現場部署一版給我測一下好不好用,一天我給現場發包就發了20個,馬上下班的時候我給現場發了個包,和現場哥們說這個不行就暫時換回備份的包吧,說實話我對這個包真沒報啥希望。竟然解決了,我聽到以后都震驚了改了一天給現場發了20個包,最后這個包啥都沒改竟然好用了,我也很詫異,最后發現是我把vue-pdf降了幾個版本,什么都沒改就好使了。之前用的是最新的"vue-pdf": “4.3.0”,我卸了重新按了個4.0.7的竟然解決了!!!


5. Uncaught SyntaxError: Unexpected token ‘<‘
從接觸vue-pdf開始,就感覺不是啥善茬,最開始是在electron-vue項目中接觸,安裝完依賴以后就報Uncaught SyntaxError: Unexpected token ‘<‘這個錯,網上找了好多這個問題的解決方法,但是并沒有什么用,最后這個問題也沒解決,在electron項目中直接棄坑了,換成iframe預覽pdf文件,也可以達成想要的效果。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/pingmian/91606.shtml
繁體地址,請注明出處:http://hk.pswp.cn/pingmian/91606.shtml
英文地址,請注明出處:http://en.pswp.cn/pingmian/91606.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

ERP、CRM、OA整合工具哪家好?2025年最新推薦

當前,大多數中大型企業已部署了ERP(企業資源計劃)、CRM(客戶關系管理)、OA(辦公自動化)等核心業務系統。這些系統在各自職能領域內發揮著關鍵作用:ERP管理財務、供應鏈與生產&#x…

設計模式:命令模式 Command

目錄前言問題解決方案結構代碼前言 命令是一種行為設計模式,它可將請求轉換為一個包含與請求相關的所有信息的獨立對象。該轉換讓你能根據不同的請求將方法參數化、延遲請求執行或將其放入隊列中,且能實現可撤銷操作。 問題 假如你正在開發一款新的文字…

4-verilog簡單狀態機

verilog簡單狀態機 1. always (posedge clk or negedge rst_n) beginif (!rst_n)cnt_1ms < 20b0;else if (cnt_1ms_en)cnt_1ms < cnt_1ms 1b1;elsecnt_1ms < 20d0; endalways (posedge clk or negedge rst_n) beginif(!rst_n)cur_state < s1_power_init;else i…

ICCV2025 | 對抗樣本智能安全方向論文匯總 | 持續更新中~

匯總結果來源&#xff1a;ICCV 2025 Accepted Papers 若文中出現的 論文鏈接 和 GitHub鏈接 點不開&#xff0c;則說明還未公布&#xff0c;在公布后筆者會及時添加. 若筆者未及時添加&#xff0c;歡迎讀者告知. 文章根據題目關鍵詞搜索&#xff0c;可能會有遺漏. 若筆者出現…

SPI通信中CS片選的兩種實現方案:硬件片選與軟件片選

一. 簡介本文簡單熟悉一下SPI通信中的片選信號&#xff08;CS&#xff09;的兩種實現方案&#xff1a;硬件片選和軟件片選&#xff0c;以及兩種方案的區別&#xff0c;如何選擇。在SPI&#xff08;Serial Peripheral Interface&#xff09;通信中&#xff0c;片選信號&#xff…

IBM 報告稱除美國外,全球數據泄露成本下降

IBM 發布的一份針對 113,620 起數據泄露事件的年度全球分析報告發現&#xff0c;平均數據泄露成本同比下降了 9%&#xff0c;這主要歸功于更快的發現和遏制速度。 該報告與波耐蒙研究所 (Ponemon Institute) 合作完成&#xff0c;發現全球平均數據泄露成本從 2024 年的 488 萬美…

Docker Compose 部署 Dify + Ollama 全棧指南:從裸奔到安全可觀測的 AI 應用實戰

&#x1f4cc; 摘要 本文以中國開發者視角出發&#xff0c;手把手教你用 Docker Compose 在本地或輕量云主機上部署 Dify Ollama 組合棧&#xff0c;實現“安全、可觀測、可擴展”的私有化 AI 應用平臺。全文約 8 000 字&#xff0c;包含&#xff1a; 架構圖、流程圖、甘特圖…

「源力覺醒 創作者計劃」_全方面實測文心ERNIE-4.5-VL-28B-A3B開源大模型

「源力覺醒 創作者計劃」_全方面實測文心ERNIE-4.5-VL-28B-A3B開源大模型1. 文心大模型4.5-28B概述2. 部署ERNIE-4.5-VL-28B-A3B文心大模型2.1. 創建GPU云主機2.2. ERNIE-4.5-VL-28B-A3B部署2.3. 創建大模型API交互接口3. 文心大模型4.5-28B多方面性能評測3.1. 語言理解方面3.2…

數據庫學習------數據庫事務的特性

在數據庫操作中&#xff0c;事務是保證數據一致性和完整性的核心機制。無論是簡單的單表更新&#xff0c;還是復雜的多表關聯操作&#xff0c;事務都扮演著至關重要的角色。那么什么是數據庫事務&#xff1f;數據庫事務是一個不可分割的操作序列&#xff0c;它包含一個或多個數…

18-C語言:第19天筆記

C語言&#xff1a;第19天筆記 內容提要 構造類型 結構體共用體/聯合體構造類型 數據類型 基本類型/基礎類型/簡單類型 整型 短整型&#xff1a;short – 2字節基本整型&#xff1a;int – 4字節長整型&#xff1a;long – 32位系統4字節/ 64位系統8字節長長整型&…

centos下安裝anaconda

下載 anaconda 安裝包 wget https://repo.anaconda.com/archive/Anaconda3-2022.05-Linux-x86_64.sh 2. 授權 chmod x Anaconda3-2022.05-Linux-x86_64.sh 3. 安裝 ./Anaconda3-2022.05-Linux-x86_64.sh 此時顯示Anaconda的信息&#xff0c;并且會出現More&#xff0c;繼續…

MySQL(172)如何進行MySQL的全局變量設置?

MySQL的全局變量是影響整個服務器設置和行為的參數。可以在服務器啟動時通過配置文件設置這些變量&#xff0c;也可以在服務器運行時通過SQL命令動態調整。以下是關于如何設置和管理MySQL全局變量的詳細說明和示例代碼。 一、通過配置文件設置全局變量 在MySQL服務器啟動時&…

【最后203篇系列】030 強化學習探索

前言 我發現在csdn寫完一篇文章越來越難了&#xff0c;有n篇寫了一半沒往下寫。原來我覺得補完203篇&#xff0c;湊到一千篇是個很簡單的事&#xff0c;沒想到還挺難的。 我回想了一下&#xff0c;過去一年大模型領域繼續發生這很劇烈的變化&#xff0c;這是一種新的模式 &…

fastGEO v1.7.0 大更新,支持PCA、差異分析、火山圖、熱圖、差異箱線圖、去批次等分析

前言 之前一篇文章【fastGEO V1.6.1 這個版本強的可怕&#xff0c;GEO數據自動下載、探針注釋、Shiny App】介紹了fastGEO用于GEO數據下載和探針注釋的核心功能。 雖然是付費50獲取安裝包&#xff08;剛開始是20&#xff09;&#xff0c;但也深受歡迎&#xff0c;說明這個R包…

LLM 典型模型技術特性及項目落地全流程實踐

在大語言模型(LLM)技術快速迭代的當下,開發者面臨的核心挑戰已從 “是否使用” 轉變為 “如何正確選型并高效落地”。本文將系統剖析當前主流 LLM 的技術特性,結合實際項目架構,提供從模型選型、接口集成到性能優化的全流程技術方案,并附關鍵代碼實現,為工業級 LLM 應用…

機器學習消融實驗:方法論演進、跨領域應用與前沿趨勢

一、定義與起源 消融實驗&#xff08;Ablation Study&#xff09;是一種系統性移除或修改模型關鍵組件以評估其對整體性能貢獻的實驗方法論。其術語源于神經科學和實驗心理學&#xff08;20世紀60-70年代&#xff09;&#xff0c;指通過切除動物腦區研究行為變化的實驗范式。2…

北京-4年功能測試2年空窗-報培訓班學測開-今天來聊聊我的痛苦

最近狀態很不對勁&#xff0c;因為我很少花時間好好思考&#xff0c;只是處于執行狀態&#xff0c;甚至也不太寫筆記了&#xff0c;我原以為這樣會更高效&#xff0c;現在想想&#xff0c;開始不愿花時間深思才是斷弦的開始吧而且從結課后我有了隱瞞&#xff0c;我不想過多透露…

深度解析 | AI 幻覺的形成和應對路徑

寫這一篇的緣由一是因為我也在摸索如何降低 AI 幻覺提升 AI 工具使用效率&#xff0c;二是因為前兩周在MIT學習時老師講的一節課&#xff0c;剛好也解釋了這個問題&#xff0c;所以一并做個總結&#xff0c;分享給大家。 近幾年&#xff0c;大型語言模型&#xff08;LLM&#…

Java把word轉HTML格式

Java把word轉HTML格式&#xff0c;兩種方式方式一&#xff1a;maven引入依賴,pom.xml<dependency><groupId>e-iceblue</groupId><artifactId>spire.office.free</artifactId><version>5.3.1</version> </dependency>然后代碼讀…

#C語言——學習攻略:探索字符函數和字符串函數(一)--字符分類函數,字符轉換函數,strlen,strcpy,strcat函數的使用和模擬實現

&#x1f31f;菜鳥主頁&#xff1a;晨非辰的主頁 &#x1f440;學習專欄&#xff1a;《C語言學習》 &#x1f4aa;學習階段&#xff1a;C語言方向初學者 ?名言欣賞&#xff1a;"編程的本質是理解問題&#xff0c;然后把它分解成可執行的步驟。" 目錄 1. 字符分類函…