【前端】html2pdf實現用前端下載pdf

npm安裝完后,編寫代碼。

<template><div id="pdf-content">需要被捕獲為pdf的內容</div>
</template><script>
import html2pdf from 'html2pdf.js';export default {methods: {downloadPdf() {const element = document.getElementById('pdf-content');const opt = {// 轉換后的pdf的外邊距分別為:上: 10px、右: 10px、下: 10px、左: 10pxmargin:        [10, 10, 10, 10],filename:     '下載.pdf',image:        { type: 'jpeg', quality: 1 },html2canvas:  { scale: 1 },jsPDF:        { unit: 'mm', format: 'a4', orientation: 'portrait' }};// 調用html2pdf庫的方法生成PDF文件并下載html2pdf().from(element).set(opt).save();},},
};
</script>

pdf-content這一塊div展示的內容都將被捕獲,成為生成的pdf頁的內容。

注意,如果pdf-content使用了滾動條,滾動條沒有滾到的部分是無法被捕獲進pdf的,直接導致捕獲內容不完整

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

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

相關文章

從零實現富文本編輯器#4-瀏覽器選區模型的核心交互策略

先前我們提到了&#xff0c;數據模型的設計是編輯器的基礎模塊&#xff0c;其直接影響了選區模塊的表示。選區模塊的設計同樣是編輯器的基礎部分&#xff0c;編輯器應用變更時操作范圍的表達&#xff0c;就需要基于選區模型來實現&#xff0c;也就是說選區代表的意義是編輯器需…

數論——質數和合數及求質數

質數、合數和質數篩 質數和合數及求質數試除法判斷質數Eratosthenes篩選法&#xff08;埃氏篩&#xff09;線性篩&#xff08;歐拉篩&#xff09; 質數有關OJ列舉P1835 素數密度 - 洛谷簡單的哥赫巴德猜想和cin優化 質數和合數及求質數 一個大于 1 的自然數&#xff0c;除了 1…

多商戶系統源碼性能調優實戰:從瓶頸定位到高并發架構設計!

在電商業務爆發式增長的今天&#xff0c;多商戶系統作為支撐平臺方、入駐商家和終端消費者的核心樞紐&#xff0c;其性能表現直接決定了商業變現效率。當你的商城在促銷期間崩潰&#xff0c;損失的不僅是訂單&#xff0c;更是用戶信任。 本文將深入剖析多商戶系統源碼性能優化的…

JDBC連不上mysql:Unable to load authentication plugin ‘caching_sha2_password‘.

最近為一個spring-boot項目下了mysql-9.3.0&#xff0c;結果因為mysql版本太新一直報錯連不上。 錯誤如下&#xff1a; 2025-06-01 16:19:43.516 ERROR 22088 --- [http-nio-8080-exec-2] o.a.c.c.C.[.[.[/].[dispatcherServlet] : Servlet.service() for servlet [dispat…

超標量處理器設計6-指令解碼

1. 指令緩存 指令緩存本質上是一個FIFO, 它能夠將指令按照程序中指定的順序存儲起來&#xff0c;這樣指令在解碼的時候&#xff0c;仍然可以按照程序中指定的順序進行解碼。指令緩存是超標量處理器中必須的部件&#xff0c;其原因有兩個&#xff1a; 1. 每周期可以取指的個數大…

基于 HT for Web 輕量化 3D 數字孿生數據中心解決方案

一、技術架構&#xff1a;HT for Web 的核心能力 圖撲軟件自主研發的 HT for Web 是基于 HTML5 的 2D/3D 可視化引擎&#xff0c;核心技術特性包括&#xff1a; 跨平臺渲染&#xff1a;采用 WebGL 技術&#xff0c;支持 PC、移動端瀏覽器直接訪問&#xff0c;兼容主流操作系統…

【Linux】shell的條件判斷

目錄 一.使用邏輯運算符判定命令執行結果 二.條件判斷方法 三.判斷表達式 3.1文件判斷表達式 3.2字符串測試表達式 3.3整數測試表達式 3.4邏輯操作符 一.使用邏輯運算符判定命令執行結果 && 在命令執行后如果沒有任何報錯時會執行符號后面的動作|| 在命令執行后…

【Python辦公】Excel簡易透視辦公小工具

目錄 專欄導讀1. 背景介紹2. 功能介紹3. 庫的安裝4. 界面展示5. 使用方法6. 實際應用場景7. 優化方向完整代碼總結專欄導讀 ?? 歡迎來到Python辦公自動化專欄—Python處理辦公問題,解放您的雙手 ?????? 博客主頁:請點擊——> 一晌小貪歡的博客主頁求關注 ?? 該系…

HarmonyOS鴻蒙與React Native的融合開發模式以及能否增加對性能優化的具體案例

鴻蒙與React Native的融合開發模式 一、技術架構設計 底層適配層 通過HarmonyOS的NDK封裝原生能力&#xff08;如分布式軟總線、AI引擎&#xff09; 使用React Native的Native Modules橋接鴻蒙API&#xff08;需重寫Java/Objective-C部分為ArkTS&#xff09; 組件映射機制 …

LLaMA-Factory - 批量推理(inference)的腳本

scripts/vllm_infer.py 是 LLaMA-Factory 團隊用于批量推理&#xff08;inference&#xff09;的腳本&#xff0c;基于 vLLM 引擎&#xff0c;支持高效的并行推理。它可以對一個數據集批量生成模型輸出&#xff0c;并保存為 JSONL 文件&#xff0c;適合大規模評測和自動化測試。…

麥克風和電腦內播放聲音實時識別轉文字軟件FunASR整合包V5下載

我基于FunASR制作的實時語音識別轉文字軟件當前更新到V5版本。軟件可以實時識別麥克風聲音和電腦內播放聲音轉為文字。 FunASR軟件介紹 FunASR 是一款基礎語音識別工具包和開源 SOTA 預訓練模型&#xff0c;支持語音識別、語音活動檢測、文本后處理等。 我使用FunASR制作了一…

子串題解——和為 K 的子數組【LeetCode】

謹記&#xff1a; 數組不是單調的話&#xff0c;不要用滑動窗口&#xff0c;考慮用前綴和 寫法一&#xff1a;兩次遍歷 代碼的核心思想是通過 前綴和 和 哈希表 來高效地統計符合條件的子數組個數。具體步驟如下&#xff1a; 計算前綴和數組 s&#xff1a; s[i] 表示 nums 的前…

硬件服務器基礎

1、硬件服務器基礎 2、服務器后面板 3、組件 3.1 CPU 3.2 內存 3.3 硬盤 3.4 風扇 4、服務器品牌 4.1 配置 4.2 CPU 架構 4.2.1 CPU 命名規則 4.2.2 服務器 CPU 和家用 CPU 的區別 4.2.3 CPU 在主板的位置 4.2.4 常見 CPU 安裝方式 4.3 內存中組件 4.3.1 內存的分類 4.3.1.1 …

OpenWebUI(1)源碼學習構建

1. 前言 通過docker鏡像拉取安裝就不介紹了&#xff0c;官方的命令很多。本節主要擼一擼源碼&#xff0c;所以&#xff0c;本地構建 2. 技術框架和啟動環境 后端python&#xff0c;前端svelte 環境要求&#xff1a;python > 3.11 &#xff0c;Node.js > 20.10 3. 源…

三方接口設計注意事項

前言 隨著業務系統間集成需求的增加&#xff0c;三方接口設計已成為現代軟件架構中的關鍵環節。一個設計良好的三方接口不僅能夠提供穩定可靠的服務&#xff0c;還能確保數據安全、提升系統性能并支持業務的持續發展。 一、設計原則 1. 統一接口原則 三方接口設計應遵循統一…

CSS篇-5

1. 內聯元素可以實現浮動嗎? 是的,內聯元素完全可以實現浮動。在 CSS 中,任何元素都可以被設置為浮動(float)。 當一個元素被設置了 float 屬性后,無論它本身是塊級元素還是內聯元素,它都會表現出類似于塊級元素的特性: 生成塊級框(Block-level box):浮動元素會生…

RocketMQ 學習

消息隊列 參考官方文檔&#xff1a;https://rocketmq.apache.org/zh/docs/ 基本概念 主題&#xff08;Topic&#xff09;&#xff1a;是消息傳輸和消息存儲的頂級容器&#xff0c;不是實際的消息容器&#xff0c;而是一個邏輯上的概念&#xff0c;用于區分不同業務消息的標識&…

Conda更換鏡像源教程:加速Python包下載

Conda更換鏡像源教程&#xff1a;加速Python包下載 為什么要更換conda鏡像源&#xff1f; Conda作為Python的包管理和環境管理工具&#xff0c;默認使用的是國外鏡像源&#xff0c;在國內下載速度往往較慢。通過更換為國內鏡像源&#xff0c;可以顯著提高包下載速度&#xff…

PCIe—TS1/TS2 之Polling.Active(一)

前文 訓練序列有序集用于比特對齊、符號對齊以及交換物理層參數。2.5GT/s和5GT/s速率時&#xff0c;訓練序列有序集不會加擾&#xff0c;只用8b/10b 編碼。但到8GT/s及以上速率時&#xff0c;采用128b/130b編碼&#xff0c;符號有可能加擾有可能不加擾&#xff0c;具體…

【HarmonyOS Next之旅】DevEco Studio使用指南(二十八) -> 開發云對象

目錄 1 -> 開發流程 2 -> 創建云對象 3 -> 開發云對象 4 -> 調試云對象 4.1 -> 前提條件 4.2 -> 通過本地調用方式調試云對象 4.3 -> 通過遠程調用方式調試云對象 5 -> 部署云對象 1 -> 開發流程 除去傳統的云函數&#xff0c;您還可在端云…