Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 美女视频黄a全部免费专区一,精品一区二区三区中文字幕,韩国精品一区二区三区在线观看 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營銷服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          JSPDF + html2canvas A4分頁截?cái)?/h1>
        
           
          
	
	
          
		
                        
          言
          最近在業(yè)務(wù)上遇到了一個(gè)問題是要將頁面打印輸出成pdf文件，通過點(diǎn)擊一個(gè)按鈕，就能夠?qū)㈨撁鎸懺谝粋€(gè)pdf上，并下載下來，需要保證pdf的內(nèi)容具有很好的可讀性。
          經(jīng)評估要實(shí)現(xiàn)這個(gè)需求，一種可行的方案是將HTML頁面轉(zhuǎn)為PDF，并實(shí)現(xiàn)下載。通過技術(shù)調(diào)研，最終的方案確定為通過html2canvas + jspdf這兩個(gè)庫來實(shí)現(xiàn)，通過使用html2canvas提供的方法，將頁面元素轉(zhuǎn)為base64圖片流，然后將其插入jspdf插件中，實(shí)現(xiàn)保存并下載pdf。
          html2canvas + jspdf方案是前端實(shí)現(xiàn)頁面打印的一種常用方案，但是在實(shí)踐過程中，遇到的最大問題就是分頁截?cái)?/strong>的問題：當(dāng)頁面元素超過一頁A4紙的時(shí)候，連續(xù)的頁面就會(huì)因?yàn)榉猪摱鴮?dǎo)致內(nèi)容被截?cái)啵M(jìn)而影響了pdf的可讀性。
          由于網(wǎng)上關(guān)于分頁截?cái)嗟慕鉀Q思路比較少，所以特意將此次的解決方案記錄下來。
          使用 JSPDF 和 html2canvas 創(chuàng)建簡單的 PDF文件
          首先，我們開始使用 JSPDF 和 html2canvas 生成一個(gè)簡單的 PDF文件。
          創(chuàng)建一個(gè) JSPDF 實(shí)例
          創(chuàng)建一個(gè) JSPDF 實(shí)例，設(shè)置頁面的大小、方向和其他參數(shù)。參考官網(wǎng)可以寫一個(gè)很簡單的實(shí)例
          var doc = new jsPDF({
  orientation: 'landscape',
  unit: 'in',
  format: [4, 2]
}

doc.text('Hello world!', 1, 1)
doc.save('two-by-four.pdf')


          生成一個(gè)pdf文件，并且在文件中寫入一定內(nèi)容，其實(shí)JSPDF這個(gè)庫就能做到。
          但是很多業(yè)務(wù)場景下，我們的目標(biāo)內(nèi)容會(huì)更復(fù)雜，而且還要考慮樣式，所以最好的方式是引入html2canvas這個(gè)庫，將頁面元素轉(zhuǎn)換成base64數(shù)據(jù)，然后貼在pdf中(使用addImage方法），這樣就能保證頁面的內(nèi)容。
          引入了html2canvas庫后，我們更多關(guān)注是利用現(xiàn)成組件庫、框架或者原生html和css實(shí)現(xiàn)更復(fù)雜的頁面內(nèi)容。
          引入 html2canvas
          使用 html2canvas 捕捉 HTML 內(nèi)容或特定的 HTML 元素，并將其轉(zhuǎn)換為 Canvas。其中，html2canvas 函數(shù)的主要用法是：
          html2canvas(element, options);

          • element： 要渲染為 canvas 的 HTML 元素。這可以是一個(gè) DOM 元素，也可以是一個(gè)選擇器字符串，表示需要渲染的元素。
          • options（可選）： 一個(gè)包含配置選項(xiàng)的對象，用于定制 html2canvas 的行為。
          以下是一些常見的配置選項(xiàng)：
          • allowTaint（默認(rèn)值: false）： 是否允許加載跨域的圖片，默認(rèn)為 **false**。如果設(shè)為 true，html2canvas 將嘗試加載跨域的圖片，但在某些情況下可能會(huì)受到瀏覽器的限制。
          • backgroundColor（默認(rèn)值: #ffffff）： canvas 的背景顏色。
          • useCORS（默認(rèn)值: false）： 是否使用 CORS（Cross-Origin Resource Sharing）來加載圖片。如果設(shè)置為 **true**，則 html2canvas 將嘗試使用 CORS 來加載圖片。
          • logging（默認(rèn)值: false）： 是否輸出日志信息到控制臺(tái)。
          • width 和 height： canvas 的寬度和高度。如果未指定，則默認(rèn)為目標(biāo)元素的寬度和高度。
          • scale（默認(rèn)值: window.devicePixelRatio）： 縮放因子，決定 canvas 的分辨率。
          下面是一個(gè)簡單的demo，可以看到html2canvas能夠?qū)?span style="color: #EF7060; --tt-darkmode-color: #EF7060;">dom元素轉(zhuǎn)化為一張base64圖片，將鼠標(biāo)選中元素，可以感受到圖片和文字的不同。
          <div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

          html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

          Untitled.png
          將html2canvas轉(zhuǎn)化的圖片放到pdf中
          這一步我們需要使用JSPDF 的addImage方法，其語法如下：
          addImage(imageData, format, x, y, width, height, alias, compression)

          • imageData - 要添加的圖像數(shù)據(jù)。可以是圖像的 URL、圖像的 base64 編碼字符串或圖像的二進(jìn)制數(shù)據(jù)
          • format - 圖像的格式。可以是 "JPEG"、"PNG" 或 "TIFF"。
          • x - 圖像在 PDF 文檔中的 x 坐標(biāo)。
          • y - 圖像在 PDF 文檔中的 y 坐標(biāo)。
          • width - 圖像的寬度。
          • height - 圖像的高度。
          • alias - 圖像的別名。此別名可用于在 PDF 文檔中引用圖像。
          • compression - 圖像的壓縮級(jí)別。可以是 "NONE"、"FAST" 或 "SLOW"。
          下面是一串示例代碼：
          import jsPDF from 'jspdf';

export default function addImageUsage() {
  const doc = new jsPDF();
  const imageData = 【替換成base64數(shù)據(jù)流】;
  doc.addImage(imageData, 'png', 0, 0, 10, 10);
  doc.addImage(imageData, 'png', 100, 100, 10, 10);
  doc.addImage(imageData, 'png', 200, 200, 10, 10);

  drawNet(doc);

  doc.save('output.pdf');
}

const drawNet = (doc) => {
  const gap = 10;
  const start = [0, 0];
  const end = [595.28, 841.89];

  // 所有橫線
  for (let i = start[0]; i < end[0]; i = i + gap) {
    doc.line(i, 0, i, end[0]);
  }
  // 所有縱線
  for (let j = start[1]; j < end[1]; j = j + gap) {
    doc.line(0, j, end[1], j);
  }
};

          此示例將在 PDF 文檔（默認(rèn)是A4紙大小，寬高為[595.28, 841.89]像素）的 (10, 10) 、(100, 100) 、(200, 200) 坐標(biāo)處，添加一張png 圖像。圖像的寬度和高度將分別為 10 和 10 像素，為了了解pdf中的坐標(biāo)系統(tǒng)，此示例還在pdf文檔中生成了間距為10px的網(wǎng)格系統(tǒng)。
          JSPDF 和 html2canvas結(jié)合起來用
          了解了上面的三個(gè)關(guān)鍵點(diǎn)，接下來我們將這三個(gè)步驟串聯(lián)起來，實(shí)現(xiàn)一個(gè)基本的html→pdf的方案。大致步驟如下：
          1. 寫一個(gè)基本html頁面
          2. 創(chuàng)建jspdf實(shí)例
          3. 獲取頁面的dom節(jié)點(diǎn)，使用html2canvas將其轉(zhuǎn)化為base64數(shù)據(jù)流
          4. 將base64數(shù)據(jù)流裝載到jspdf提供的addImage方法中
          5. 保存pdf
          基于這5個(gè)步驟，可以實(shí)現(xiàn)基本的頁面打印。
          import html2canvas from 'html2canvas';
import jsPDF, { RGBAData } from 'jspdf';

// 將元素轉(zhuǎn)化為canvas元素
// 通過 放大 提高清晰度
// width為內(nèi)容寬度
async function toCanvas(element: HTMLElement) {
  if (!element) return { width: 0, height: 0 };

  // canvas元素
  const canvas = await html2canvas(element, {
    scale: window.devicePixelRatio * 2, // 增加清晰度
    useCORS: true // 允許跨域
  });

  // 獲取canvas轉(zhuǎn)化后的寬高
  const { width: canvasWidth, height: canvasHeight } = canvas;

  // 轉(zhuǎn)化成圖片Data
  const canvasData = canvas.toDataURL('image/jpeg', 1.0);

  return { width: canvasWidth, height: canvasHeight, data: canvasData };
}

/**
 * 生成pdf(A4多頁pdf截?cái)鄦栴}， 包括頁眉、頁腳 和 上下左右留空的護(hù)理)
 */
export async function generatePDF({
  /** pdf內(nèi)容的dom元素 */
  element,

  /** pdf文件名 */
  filename
}) {
  if (!(element instanceof HTMLElement)) {
    return;
  }

  const pdf = new jsPDF();

  // 一頁的高度， 轉(zhuǎn)換寬度為一頁元素的寬度
  const {
    width: imageWidth,
    height: imageHeight,
    data
  } = await toCanvas(element);

  // 添加圖片
  function addImage(
    _x: number,
    _y: number,
    pdfInstance: jsPDF,
    base_data:
      | string
      | HTMLImageElement
      | HTMLCanvasElement
      | Uint8Array
      | RGBAData,
    _width: number,
    _height: number
  ) {
    pdfInstance.addImage(base_data, 'JPEG', _x, _y, _width, _height);
  }

  addImage(0, 0, pdf, data!, imageWidth, imageHeight);

  return pdf.save(filename);
}

          多頁：比例縮放+循環(huán)移位
          通常，在我們的實(shí)踐中，會(huì)發(fā)現(xiàn)2個(gè)問題：
          • 生成的pdf內(nèi)容與實(shí)際的頁面元素比例不一致
          • 頁面內(nèi)容超出一頁pdf的高度，但是生成的pdf只有一頁，沒有展示全部的頁面信息
          這兩個(gè)問題的解決方案是等比例縮放+循環(huán)移位：
          • 等比例縮放
          通過比例縮放，實(shí)現(xiàn)頁面內(nèi)容等比例展示在pdf文檔中
          令頁面元素的寬高為x, y（轉(zhuǎn)化成canvas圖片的寬高），pdf文檔的寬高為w, h。因?yàn)楦叨瓤梢酝ㄟ^加頁延伸，所以可以按照寬度進(jìn)行縮放，縮放后的圖片高度可以通過下列公式計(jì)算
          • 循環(huán)移位
          如果頁面的高度超出了pdf文檔的高度，即y > h，使用addPage方法添加一頁即可。但是在新的一頁中，我們的圖片內(nèi)容的高度需要調(diào)整。
          假設(shè)y = 2 * h，這意味我們需要兩頁才能完整得展示頁面內(nèi)容。在一頁pdf中，圖片在起始位置插入即可，即
           PDF.addImage(pageData, 'JPEG', 0, 0, x, y)// 注意x,y 是縮放后的大小

          在第二頁pdf中，圖片的縱向位置需要調(diào)整一頁pdf的高度，即
           PDF.addImage(pageData, 'JPEG', 0, -h, x, y)// 注意x,y 是縮放后的大小

          通過循環(huán)計(jì)算剩余高度，然后不停調(diào)整縱向位置移動(dòng)base64的圖片位置，可以解決多頁的問題。
          分頁截?cái)嗟奶魬?zhàn)
          盡管 JSPDF 和 html2canvas 是功能強(qiáng)大的工具，但是他們也有很多槽點(diǎn)，比如得手動(dòng)分頁，手動(dòng)處理分頁截?cái)嗟膯栴}。等你實(shí)踐到這一步，就開始面臨分頁截?cái)嗟膯栴}，類似的問題也有網(wǎng)友在Github上提出，但是底下依然沒有很好的解決思路。
          好在掘金上有人分享了一個(gè)不錯(cuò)的方法：
          jsPDF + html2canvas A4分頁截?cái)?完美解決方案（含代碼 + 案例） - 掘金
          概括一下，其處理分頁截?cái)嗟脑砭褪窃谑褂?/span>addImage之前，將html進(jìn)行分頁，通過維護(hù)一個(gè)高度位置數(shù)據(jù)，來記錄每次循環(huán)迭代addImage的位置。
          從高到低遍歷維護(hù)一個(gè)分頁數(shù)組pages，該數(shù)組記錄每一頁的起始位置，如：pages[0] 對應(yīng) 第一頁起始位置，pages[1] 對應(yīng)第二頁起始位置
          Untitled2.png
          接下來我們重點(diǎn)討論如何將頁面進(jìn)行切割，然后生成pages這個(gè)數(shù)組。
          假設(shè)頁面的高度是1500，pdf寬高是[500, 900]，如果不用處理分頁截?cái)嗟膯栴}，我們可以想到第一頁（0-900）是用來承載頁面從高度為0到900的信息；
          第二頁（900-1800）是用來承載頁面從高度900到1500的，所以pages數(shù)組為[0, 900]。
          如果要處理分頁截?cái)嗄兀@時(shí)候就需要計(jì)算頁面元素的距離pdf文檔起始位置的高度h1，以及該元素的內(nèi)部高度h2，通過這兩個(gè)高度來判斷這個(gè)元素要不要放在下一頁，防止截?cái)啵疽鈭D如下：
          Untitled4.png
          如果h1 + h2 > 頁面高度， 這時(shí)候說明這個(gè)元素不處理的就會(huì)被分頁截?cái)啵詰?yīng)該要把這個(gè)元素放到第二頁去渲染，這就意味著pages記錄的數(shù)據(jù)要變化，示意圖如下，可以看到pages[1]我們往上調(diào)整了，比第二頁pdf的起始位置更高。
          Untitled5.png
          說明渲染第二頁pdf的時(shí)候，要從h1開始渲染，pages數(shù)組為[0, h1]，解釋為第一頁pdf渲染頁面高度區(qū)域?yàn)?span style="color: #EF7060; --tt-darkmode-color: #EF7060;">0-900, 第二頁pdf渲染html高度區(qū)域?yàn)?span style="color: #EF7060; --tt-darkmode-color: #EF7060;">h1-1500。注意到第一頁渲染的時(shí)候到尾部的時(shí)候，會(huì)有部分內(nèi)容和第二頁頭部內(nèi)容重合。因?yàn)?span style="color: #EF7060; --tt-darkmode-color: #EF7060;">h1到900這部分的內(nèi)容肯定會(huì)渲染，這部分內(nèi)容一直都是頁面元素，我們改變pages[1]的值的原因只是創(chuàng)建一個(gè)副本，讓頁面看起來內(nèi)容沒有被截?cái)唷?/p>
          為了解決這個(gè)問題（為了美觀），我們用填充一塊白色區(qū)域遮掉它！此處使用jspdf的rect和setFillColor方法，把重合的區(qū)域遮白處理。
          pdf.setFillColor(255, 255, 255);
pdf.rect(x, y, Math.ceil(_width), Math.ceil(_height), 'F');

          如何獲得h1和h2
          上面我們談到了h1和h2，其中h1是元素盒子的上邊距到打印區(qū)域的高度（比例縮放后的高度），h2是元素盒子的內(nèi)部高度。
          計(jì)算h1: getBoundingClientRect方法
          const rect = contentElement.getBoundingClientRect() || {};
const topDistance = rect.top;
return topDistance;

          Untitled6.png
          計(jì)算h2：offsetHeight方法
          Untitled7.png
          值得注意的是，因?yàn)榇蛴^(qū)域的html元素不一定是從窗口頂部開始，所以為了計(jì)算實(shí)際的h1(元素到打印區(qū)域的頂部距離），可以采用這樣的方法：
          • 用getBoundingClientRect方法計(jì)算元素到窗口頂部的距離
          • 循環(huán)打印之前將pages信息針對第一個(gè)元素進(jìn)行一個(gè)高度校準(zhǔn)。
          // 對pages進(jìn)行一個(gè)值的修正，因?yàn)閜ages生成是根據(jù)根元素來的，根元素并不是我們實(shí)際要打印的元素，而是element，
  // 所以要把它修正，讓其值是以真實(shí)的打印元素頂部節(jié)點(diǎn)為準(zhǔn)
  const newPages = pages.map((item) => item - pages[0]);

          在線demo演示和源代碼
          上述即是在實(shí)現(xiàn)前端頁面生成pdf的過程中遇到的問題，以及解決思路。
          為了更直觀得感受效果，本文也給出了不同場景（單頁、多頁、多頁截?cái)唷⒆远x頁眉頁腳、橫向）下的pdf生成效果，可以通過此鏈接體驗(yàn)：https://pdf-demo-phi.vercel.app/
          此demo的源代碼如下：pdf-demo
          與現(xiàn)有文章不同的是，本倉庫的代碼特點(diǎn)在于：
          • 支持設(shè)置pdf打印的方向，比如橫向
          • 修正了高度計(jì)算問題，解決了多出一個(gè)空白頁問題。掘金那篇文章計(jì)算元素高度時(shí)候沒有減去容器距離頂部高度，所以導(dǎo)致很多新手使用那份代碼的時(shí)候，會(huì)發(fā)現(xiàn)自己的頁面頂部被裁剪到了，原因就是這個(gè)
          • 支持自定義頁眉頁腳
          • 支持?jǐn)U展自定義分頁方法，如果遇到復(fù)雜的組件，可以自定擴(kuò)展邏輯計(jì)算高度
          作者:燕平
          來源:微信公眾號(hào):Goodme前端團(tuán)隊(duì)
          出處:https://mp.weixin.qq.com/s/-1nA-VI6kmgqHRcYs_NZFA
          tml頁面：
          <html>
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
          <title>分頁測試</title>
          <style type="text/css">
          <!--
          .A4 {
          page-break-before: auto;
          page-break-after: always;
          }
          -->
          </style>
          </head>
          <body onload="window.print();">
          <div class="A4">第一頁</div>
          <div class="A4">第二頁</div>
          </body>
          </html>
          網(wǎng)頁分頁打印的核心思想：
          css屬性：page-break-after的使用
          window.print();的使用
          頁面設(shè)置：
          1、去掉"頁眉頁腳"的勾選項(xiàng)
          2、去掉"背景"的勾選項(xiàng)
          3、其他設(shè)置：打印機(jī)的選擇、打印頁碼范圍、打印方向、彩色打印/黑白打印、紙張尺寸、邊距……
          天把上一節(jié)中關(guān)于帖子的主頁展示進(jìn)行分頁，并實(shí)現(xiàn)點(diǎn)擊用戶名稱，顯示該用戶所發(fā)的帖子信息和數(shù)量。接下來開始：
          修改django_project/blog/views.py,增加分頁代碼，某個(gè)用戶所發(fā)帖子列表視圖類：
          修改django_project/blog/urls.py,添加用戶所發(fā)帖子相關(guān)視圖url規(guī)則以及修改主頁視圖url規(guī)則：
          修改django_project/blog/templates/blog/home.html，添加分頁導(dǎo)航代碼：
          在django_project/blog/templates/blog下新建user_posts.html用戶所發(fā)帖子列表頁面:
          我們在django_project文件夾下運(yùn)行python manage.py runserver 啟動(dòng)項(xiàng)目，訪問http://127.0.0.1:8000主頁：

          點(diǎn)擊作者名稱查看用戶所發(fā)帖子信息：
          今天學(xué)習(xí)就到這里，下節(jié)見！
          關(guān)注公號(hào)yale記
          下面的是我的公眾號(hào)二維碼圖片，歡迎關(guān)注。 
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	


          
 

 







主站蜘蛛池模板：
波多野结衣一区二区三区|
高清一区二区三区日本久|
亚洲一区免费观看|
国产一区二区三区乱码在线观看|
中文字幕一区二区三区有限公司|
国产成人AV区一区二区三|
精品无码一区二区三区在线|
天堂Aⅴ无码一区二区三区|
国产在线一区视频|
精品国产日韩亚洲一区在线
|
无码aⅴ精品一区二区三区|
人妻无码视频一区二区三区|
中文字幕人妻丝袜乱一区三区|
变态调教一区二区三区|
亚洲av无码天堂一区二区三区|
无码少妇一区二区三区芒果|
人妻少妇精品视频三区二区一区|
五月婷婷一区二区|
国产一区在线mmai|
无码国产精品一区二区免费
|
亚洲爆乳精品无码一区二区三区|
国产成人综合精品一区|
果冻传媒一区二区天美传媒|
波多野结衣AV无码久久一区|
久久无码人妻精品一区二区三区|
红杏亚洲影院一区二区三区|
亚洲熟女一区二区三区|
亚洲图片一区二区|
精品深夜AV无码一区二区老年|
精品无码国产一区二区三区51安
|
欧美日韩国产免费一区二区三区|
韩国一区二区视频|
在线|一区二区三区四区|
日韩精品一区二区三区在线观看l
日韩精品一区二区三区毛片
|
日本免费电影一区二区
|
日本v片免费一区二区三区|
动漫精品第一区二区三区|
一区二区三区在线免费|
国产成人无码AV一区二区|
无码精品人妻一区二区三区中|
无码人妻精品一区二区蜜桃网站|