解決右鍵打印html只能識別1頁的問題

hello,大家好久不見,昨天在開發中遇到了一個問題,就是在自己開發的網頁中右鍵-->打印,由于頁面內容過多,打印出來的內容只被識別到一頁。

針對這一問題,查閱了好多資料最終解決啦。

1.問題重現

????????大家可以看到這個是我們開發的頁面,公司需要打印這個html給另一個平臺使用,但是因為頁面長度是有滾動條的,所以正常情況下識別出來的應該是多頁的。

但是 識別出來只有單頁,無法滾動

?于是我去看了看b站的打印,b站是可以打印識別出來多頁的

?2.解決辦法

? 這個問題當時真的是頭疼死了,看了各種解決方案,有說大廠都是對打印做了特殊處理什么的,需要js包去控制等。

但是!沒有那么復雜,我們只需要調整我們的樣式就行了。

最主要的原因就是在打印的時候,系統會去識別頁面的高度,如果你給你的body設置了一個固定高度100%,那么就只能識別到第一頁。

所以,我們要把body的高度設置成auto

?

?現在我們再來打印一下試試:

?那么,問題就解決啦。


抓緊時間練起來吧,兄dei,再不練你就廢啦!

記得支持我哦,么么噠,祝您好事成雙~~~~~~

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

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

相關文章

CentOS系統環境搭建(六)——使用docker-compose安裝redis

centos系統環境搭建專欄🔗點擊跳轉 關于Docker-compose安裝請看CentOS系統環境搭建(三)——Centos7安裝Docker&Docker Compose,該文章同樣收錄于centos系統環境搭建專欄。 Docker-compose安裝redis 文章目錄 Docker-compose安…

2023最新最全最細版本~ESP8266/ESP01S燒錄AT固件

硬件準備 圖上有兩種型號的模塊均可刷寫AT固件 ① ESP01S ② ESP8266NODEMCU 軟件準備(私聊免費分享) ESP01S1燒錄方式 如圖使用模塊燒錄座的方式~ 模塊插入燒錄座后直接連接電腦的USB接口即可~ ESP8266NODEMCU燒錄方式 如圖usb直接連接的方式~ 一端接模塊的USB口&…

數據暴漲時代,該如何數據治理?_光點科技

隨著信息技術的迅猛發展,數據已經成為現代社會的核心資源。在這個被稱為"數據暴漲時代"的時代里,大量的數據源源不斷地被產生和積累,但如何有效地管理、分析和利用這些數據成為了一個迫切需要解決的問題。數據治理,作為…

【Spring源碼】Spring擴展點及順序

Spring擴展點及順序 01-調用BeanFactoryPostProcessor的構造器 02-調用了BeanFactoryPostProcessor的postProcessBeanFactory 03-調用了BeanPostProcessor構造器 04-調用InstantiationAwareBeanPostProcessor構造方法 05-調用了InstantiationAwareBeanPostProcessor接口的Befo…

Memory Analyzer(MAT)分析內存

關于作者:CSDN內容合伙人、技術專家, 從零開始做日活千萬級APP。 專注于分享各領域原創系列文章 ,擅長java后端、移動開發、人工智能等,希望大家多多支持。 目錄 一、導讀二、概覽三、 使用3.1 hprof 文件準備3.1.1 Android sutdi…

【SpringBoot學習筆記】04. Thymeleaf模板引擎

模板引擎 所有的html元素都可以被thymeleaf替換接管 th:元素名 templates下的只能通過Controller來跳轉,templates前后端分離,需要模板引擎thymeleaf支持 模板引擎的作用就是我們來寫一個頁面模板,比如有些值呢,是動態的&#x…

cuda+anaconda+pytorch按照教程

首先安裝顯卡對應的CUDA版本,關鍵點在于區別顯卡支持的CUDA最高版本和運行版本 1、查看當前顯卡支持的最高版本,有兩種方式: 1)NVIDIA控制面板—>幫助—>系統信息—>組件—>NVCUDA.dll對應版本 請注意,12…

2023年國賽數學建模思路 - 案例:ID3-決策樹分類算法

文章目錄 0 賽題思路1 算法介紹2 FP樹表示法3 構建FP樹4 實現代碼 建模資料 0 賽題思路 (賽題出來以后第一時間在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 1 算法介紹 FP-Tree算法全稱是FrequentPattern Tree算法,就是頻繁模…

項目:基于UDP的TFTP文件傳輸

1)tftp協議概述 簡單文件傳輸協議,適用于在網絡上進行文件傳輸的一套標準協議,使用UDP傳輸特點: 是應用層協議 基于UDP協議實現 數據傳輸模式 octet:二進制模式(常用) mail:已經不再…

分布式 - 服務器Nginx:一小時入門系列之代理緩沖與緩存

官方文檔:https://nginx.org/en/docs/http/ngx_http_proxy_module.html 1. 代理緩沖 proxy_buffer 代理緩沖用于臨時存儲從后端服務器返回的響應數據。通過使用代理緩沖,Nginx可以在接收完整的響應后再將其發送給客戶端,從而提高性能和效率…

docker版jxTMS使用指南:使用jxTMS采集數據之三

本文是如何用jxTMS進行數據采集的第三部分,整個系列的文章請查看:docker版jxTMS使用指南:4.4版升級內容 docker版本的使用,請查看:docker版jxTMS使用指南 4.0版jxTMS的說明,請查看:4.0版升級內…

LeetCode 2682. 找出轉圈游戲輸家

【LetMeFly】2682.找出轉圈游戲輸家 力扣題目鏈接:https://leetcode.cn/problems/find-the-losers-of-the-circular-game/ n 個朋友在玩游戲。這些朋友坐成一個圈,按 順時針方向 從 1 到 n 編號。從第 i 個朋友的位置開始順時針移動 1 步會到達第 (i …

照耀國產的星火,再度上新!

國產之光,星火閃耀 ? 新時代的星火? 多模態能力? 圖像生成與虛擬人視頻生成? 音頻生成與OCR筆記收藏? 助手模式更新? 插件能力? 代碼能力? 寫在最后 ? 新時代的星火 在這個快速變革的時代,人工智能正迅猛地催生著前所未有的革命。從醫療到金融…

使用老北鼻AI免費GPT對話解決gun make安裝和解析iso9660的問題

在學習解析ISO9660鏡像文件時,使用了GPT來了解相關的庫和gun make編譯器的相關知識。這個過程可真是一言難盡,每個問題的回答都模棱兩可都需要去證實,不能直接復制粘貼,也不能說GPT的回答一點用也沒有,至少GPT給出了一…

自然語言處理從入門到應用——LangChain:記憶(Memory)-[聊天消息記錄]

分類目錄:《自然語言處理從入門到應用》總目錄 Cassandra聊天消息記錄 Cassandra是一種分布式數據庫,非常適合存儲大量數據,是存儲聊天消息歷史的良好選擇,因為它易于擴展,能夠處理大量寫入操作。 # List of contact…

Android 學習筆記:SharedPreferences實現數據的保存和讀取

一、概述 1.鍵值對方式存儲 SharedPreferences 是使用鍵值對的方式來存儲數據的。也就是說,當保存一條數據的時候,需要給這條數據提供一個對應的鍵,這樣在讀取數據的時候就可以通過這個鍵把相應的值取出來。 2.支持多種不同的數據類型存儲…

使用Vue和jsmind如何實現思維導圖的歷史版本控制和撤銷/重做功能?

思維導圖是一種流行的知識圖譜工具,可以幫助我們更好地組織和理解復雜的思維關系。在開發基于Vue的思維導圖應用時,實現歷史版本控制和撤銷/重做功能是非常有用的。以下為您介紹如何使用Vue和jsmind插件來實現這些功能。 安裝依賴 首先,我們…

day-17 代碼隨想錄算法訓練營(19)二叉樹 part04

110.平衡二叉樹 分析:判斷每個節點的左右子樹的高度差小于等于1;所以首先需要求左右子樹高度,再在父節點進行判斷,故此采用后序遍歷。 思路:后序遍歷二叉樹,從底部遞歸回來時加上高度 class Solution { …

【管理運籌學】第 5 章 | 整數規劃 (1,問題提出與分支定界法)

文章目錄 引言一、整數規劃問題的提出1.1 整數規劃的數學模型1.2 整數規劃問題的求解 二、分支定界法2.1 分支與定界2.2 基本求解步驟(一)初始化(二)分支與分支樹(三)定界與剪枝(四)…

SpringBoot之HandlerInterceptor攔截器的使用

😀前言 本篇博文是關于攔截器-HandlerInterceptor的使用,希望你能夠喜歡 🏠個人主頁:晨犀主頁 🧑個人簡介:大家好,我是晨犀,希望我的文章可以幫助到大家,您的滿意是我的動…