整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          利用CSS樣式實現(xiàn)分頁打印

          利用CSS樣式實現(xiàn)分頁打印

          用CSS樣式實現(xiàn)分頁打印,其主要應(yīng)用thead標記、tfoot標記和page-break-after屬性。

          (1)thead標記

          thead用于設(shè)置表格的表頭。

          (2)tfoot標記

          tfoot用于設(shè)置表格的表尾。

          (3)page-break-after屬性

          page-break-after屬性在打印文檔時發(fā)生作用,用于進行分頁打印。但是對于<br>和<hr>對象不起作用。其語法格式如下:

          page-break-after:auto | always | avoid | left | right | null

          參數(shù)說明:

          page-break:打印時在樣式控制的對象前后換頁。

          after:設(shè)置對象后出現(xiàn)頁分隔符。設(shè)置為always時,始終在對象之后插入頁分隔符。

          auto:需要在對象之后插入頁分隔符時插入。

          always:始終在對象之后插入頁分隔符。

          avoid:未支持。避免在對象后面插入分隔符。

          left:未支持。在對象后面插入頁分隔符,直到它到達一個空白的左頁邊。

          right:未支持。在對象后面插入頁分隔符,直到它到達一個空白的右頁邊。

          null:空白字符串。取消了分隔符設(shè)置。

          WebBrowser.ExecWB的完整說明

          <OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0></OBJECT>
          <input name=Button .Click=document.all.WebBrowser.ExecWB(1,1) type=button value=打開>
          <input name=Button .Click=document.all.WebBrowser.ExecWB(2,1) type=button value=關(guān)閉所有>
          <input name=Button .Click=document.all.WebBrowser.ExecWB(4,1) type=button value=另存為>
          <input name=Button .Click=document.all.WebBrowser.ExecWB(6,1) type=button value=打印>
          <input name=Button .Click=document.all.WebBrowser.ExecWB(6,6) type=button value=直接打印>
          <input name=Button .Click=document.all.WebBrowser.ExecWB(7,1) type=button value=打印預(yù)覽>
          <input name=Button .Click=document.all.WebBrowser.ExecWB(8,1) type=button value=頁面設(shè)置>
          <input name=Button .Click=document.all.WebBrowser.ExecWB(10,1) type=button value=屬性>
          <input name=Button .Click=document.all.WebBrowser.ExecWB(17,1) type=button value=全選>
          <input name=Button .Click=document.all.WebBrowser.ExecWB(22,1) type=button value=刷新>
          <input name=Button .Click=document.all.WebBrowser.ExecWB(45,1) type=button value=關(guān)閉>

          運用CSS樣式實現(xiàn)分頁打印。其具體步驟如下:

          (1)編寫用于控制指定內(nèi)容不打印的CSS樣式,代碼如下。

          @media print{
              .bgnoprint{
                  background:display:none;
              }
              .noprint{
                  display:none
              }
          }

          (2)應(yīng)用include命令連接數(shù)據(jù)源文件,并應(yīng)用do…while循環(huán)語句輸出圖書信息到瀏覽器,并設(shè)置好表頭、表尾及打印分頁,關(guān)鍵代碼如下:

          <?php include "conn/conn.php"; ?>
          <table width="99%" border="0" cellspacing="0" cellpadding="0">
          <tr>
          <td height="27" align="center" style=" font-size:14px;"><b>圖書信息查詢</b></td>
          </tr>
          </table>
          <table width="98%" border="0" cellpadding="0" cellspacing="1" bgcolor="#000000" bordercolor="#FFFFFF" bordercolordark="#000000" bordercolorlight="#FFFFFF" >
          <thead style="display:table-header-group;"> <!--設(shè)置表頭-->
          <tr bgcolor="#EFEFEF">
          <td width="6%" height="20" align="center">編號</td>
          <td width="27%" align="center">圖書名稱</td>
          <td width="23%" align="center">內(nèi)容簡介</td>
          <td width="8%" align="center">定價</td>
          <td width="10%" align="center">作者</td>
          <td width="15%" align="center">出版社</td>
          <td width="11%" align="center">發(fā)行時間</td>
          </tr>
          </thead>
          <!--控制分頁-->
          <?php
          $sql=mysql_query("select * from tb_book");
          $info=mysql_fetch_array($sql);
          $row=1;
          do{
          ?>
          <tr align="center" <?php if($row==2){ ?>style="page-break-after:always"<?php } ?>>
          <td bgcolor="#FFFFFF"><?php echo $info[id];?></td>
          <td height="25" align="left" bgcolor="#FFFFFF"> <?php echo $info[bookname];?></td>
          <td align="left" bgcolor="#FFFFFF"> <?php echo $info[synopsis];?></td>
          <td bgcolor="#FFFFFF"><?php echo $info[price];?></td>
          <td bgcolor="#FFFFFF"><?php echo $info[maker];?></td>
          <td bgcolor="#FFFFFF"><?php echo $info[publisher];?></td>
          <td bgcolor="#FFFFFF"><?php echo $info[issuDate];?></td>
          </tr>
          <?php
          $row++;
          }while($info=mysql_fetch_array($sql))
          ?>
          <!--設(shè)置表尾-->
          <tfoot style="display:table-footer-group; border:none;"><tr><td></td></tr></tfoot>
          </table>

          (3)建立HTML的object標簽,調(diào)用WebBrowser控件,代碼如下:

          <object id="Wb" classid="ClSID:8856F961-340A-11D0-A96B-00C04Fd705A2" width="0" height="0">
          </object>

          (4)建立相關(guān)的打印超級鏈接,并調(diào)用WebBrowser控件的相應(yīng)參數(shù)實現(xiàn)打印預(yù)覽及打印功能,代碼如下:

          最近在業(yè)務(wù)上遇到了一個問題是要將頁面打印輸出成pdf文件,通過點擊一個按鈕,就能夠?qū)㈨撁鎸懺谝粋€pdf上,并下載下來,需要保證pdf的內(nèi)容具有很好的可讀性。

          經(jīng)評估要實現(xiàn)這個需求,一種可行的方案是將HTML頁面轉(zhuǎn)為PDF,并實現(xiàn)下載。通過技術(shù)調(diào)研,最終的方案確定為通過html2canvas + jspdf這兩個庫來實現(xiàn),通過使用html2canvas提供的方法,將頁面元素轉(zhuǎn)為base64圖片流,然后將其插入jspdf插件中,實現(xiàn)保存并下載pdf。

          html2canvas + jspdf方案是前端實現(xiàn)頁面打印的一種常用方案,但是在實踐過程中,遇到的最大問題就是分頁截斷的問題:當頁面元素超過一頁A4紙的時候,連續(xù)的頁面就會因為分頁而導(dǎo)致內(nèi)容被截斷,進而影響了pdf的可讀性。

          由于網(wǎng)上關(guān)于分頁截斷的解決思路比較少,所以特意將此次的解決方案記錄下來。

          使用 JSPDF 和 html2canvas 創(chuàng)建簡單的 PDF文件

          首先,我們開始使用 JSPDF 和 html2canvas 生成一個簡單的 PDF文件。

          創(chuàng)建一個 JSPDF 實例

          創(chuàng)建一個 JSPDF 實例,設(shè)置頁面的大小、方向和其他參數(shù)。參考官網(wǎng)可以寫一個很簡單的實例

          var doc=new jsPDF({
            orientation: 'landscape',
            unit: 'in',
            format: [4, 2]
          }
          
          doc.text('Hello world!', 1, 1)
          doc.save('two-by-four.pdf')
          
          

          生成一個pdf文件,并且在文件中寫入一定內(nèi)容,其實JSPDF這個庫就能做到。

          但是很多業(yè)務(wù)場景下,我們的目標內(nèi)容會更復(fù)雜,而且還要考慮樣式,所以最好的方式是引入html2canvas這個庫,將頁面元素轉(zhuǎn)換成base64數(shù)據(jù),然后貼在pdf中(使用addImage方法),這樣就能保證頁面的內(nèi)容。

          引入了html2canvas庫后,我們更多關(guān)注是利用現(xiàn)成組件庫、框架或者原生html和css實現(xiàn)更復(fù)雜的頁面內(nèi)容

          引入 html2canvas

          使用 html2canvas 捕捉 HTML 內(nèi)容或特定的 HTML 元素,并將其轉(zhuǎn)換為 Canvas。其中,html2canvas 函數(shù)的主要用法是:

          html2canvas(element, options);
          
          • element 要渲染為 canvas 的 HTML 元素。這可以是一個 DOM 元素,也可以是一個選擇器字符串,表示需要渲染的元素。
          • options(可選): 一個包含配置選項的對象,用于定制 html2canvas 的行為。

          以下是一些常見的配置選項:

          • allowTaint(默認值: false): 是否允許加載跨域的圖片,默認為 **false**。如果設(shè)為 truehtml2canvas 將嘗試加載跨域的圖片,但在某些情況下可能會受到瀏覽器的限制。
          • backgroundColor(默認值: #ffffff): canvas 的背景顏色。
          • useCORS(默認值: false): 是否使用 CORS(Cross-Origin Resource Sharing)來加載圖片。如果設(shè)置為 **true**,則 html2canvas 將嘗試使用 CORS 來加載圖片。
          • logging(默認值: false): 是否輸出日志信息到控制臺。
          • widthheight canvas 的寬度和高度。如果未指定,則默認為目標元素的寬度和高度。
          • scale(默認值: window.devicePixelRatio): 縮放因子,決定 canvas 的分辨率。

          下面是一個簡單的demo,可以看到html2canvas能夠?qū)?span style="color: #EF7060; --tt-darkmode-color: #EF7060;">dom元素轉(zhuǎn)化為一張base64圖片,將鼠標選中元素,可以感受到圖片和文字的不同。

          <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 編碼字符串或圖像的二進制數(shù)據(jù)
          • format - 圖像的格式。可以是 "JPEG"、"PNG" 或 "TIFF"。
          • x - 圖像在 PDF 文檔中的 x 坐標。
          • y - 圖像在 PDF 文檔中的 y 坐標。
          • width - 圖像的寬度。
          • height - 圖像的高度。
          • alias - 圖像的別名。此別名可用于在 PDF 文檔中引用圖像。
          • compression - 圖像的壓縮級別。可以是 "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 文檔(默認是A4紙大小,寬高為[595.28, 841.89]像素)的 (10, 10)(100, 100)(200, 200) 坐標處,添加一張png 圖像。圖像的寬度和高度將分別為 10 和 10 像素,為了了解pdf中的坐標系統(tǒng),此示例還在pdf文檔中生成了間距為10px的網(wǎng)格系統(tǒng)。

          JSPDF 和 html2canvas結(jié)合起來用

          了解了上面的三個關(guān)鍵點,接下來我們將這三個步驟串聯(lián)起來,實現(xiàn)一個基本的html→pdf的方案。大致步驟如下:

          1. 寫一個基本html頁面
          2. 創(chuàng)建jspdf實例
          3. 獲取頁面的dom節(jié)點,使用html2canvas將其轉(zhuǎn)化為base64數(shù)據(jù)流
          4. base64數(shù)據(jù)流裝載到jspdf提供的addImage方法中
          5. 保存pdf

          基于這5個步驟,可以實現(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截斷問題, 包括頁眉、頁腳 和 上下左右留空的護理)
           */
          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)移位

          通常,在我們的實踐中,會發(fā)現(xiàn)2個問題:

          • 生成的pdf內(nèi)容與實際的頁面元素比例不一致
          • 頁面內(nèi)容超出一頁pdf的高度,但是生成的pdf只有一頁,沒有展示全部的頁面信息

          這兩個問題的解決方案是等比例縮放+循環(huán)移位

          • 等比例縮放

          通過比例縮放,實現(xiàn)頁面內(nèi)容等比例展示在pdf文檔中

          令頁面元素的寬高為x, y(轉(zhuǎn)化成canvas圖片的寬高),pdf文檔的寬高為w, h。因為高度可以通過加頁延伸,所以可以按照寬度進行縮放,縮放后的圖片高度可以通過下列公式計算

          • 循環(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)計算剩余高度,然后不停調(diào)整縱向位置移動base64的圖片位置,可以解決多頁的問題。

          分頁截斷的挑戰(zhàn)

          盡管 JSPDFhtml2canvas 是功能強大的工具,但是他們也有很多槽點,比如得手動分頁,手動處理分頁截斷的問題。等你實踐到這一步,就開始面臨分頁截斷的問題,類似的問題也有網(wǎng)友在Github上提出,但是底下依然沒有很好的解決思路。

          好在掘金上有人分享了一個不錯的方法:

          jsPDF + html2canvas A4分頁截斷 完美解決方案(含代碼 + 案例) - 掘金

          概括一下,其處理分頁截斷的原理就是在使用addImage之前,將html進行分頁,通過維護一個高度位置數(shù)據(jù),來記錄每次循環(huán)迭代addImage的位置。

          從高到低遍歷維護一個分頁數(shù)組pages,該數(shù)組記錄每一頁的起始位置,如:pages[0] 對應(yīng) 第一頁起始位置,pages[1] 對應(yīng)第二頁起始位置

          Untitled2.png

          接下來我們重點討論如何將頁面進行切割,然后生成pages這個數(shù)組。

          假設(shè)頁面的高度是1500,pdf寬高是[500, 900],如果不用處理分頁截斷的問題,我們可以想到第一頁(0-900)是用來承載頁面從高度為0到900的信息;

          第二頁(900-1800)是用來承載頁面從高度900到1500的,所以pages數(shù)組為[0, 900]。

          如果要處理分頁截斷呢,這時候就需要計算頁面元素的距離pdf文檔起始位置的高度h1,以及該元素的內(nèi)部高度h2,通過這兩個高度來判斷這個元素要不要放在下一頁,防止截斷,示意圖如下:

          Untitled4.png

          如果h1 + h2 > 頁面高度, 這時候說明這個元素不處理的就會被分頁截斷,所以應(yīng)該要把這個元素放到第二頁去渲染,這就意味著pages記錄的數(shù)據(jù)要變化,示意圖如下,可以看到pages[1]我們往上調(diào)整了,比第二頁pdf的起始位置更高。

          Untitled5.png

          說明渲染第二頁pdf的時候,要從h1開始渲染,pages數(shù)組為[0, h1],解釋為第一頁pdf渲染頁面高度區(qū)域為0-900, 第二頁pdf渲染html高度區(qū)域為h1-1500。注意到第一頁渲染的時候到尾部的時候,會有部分內(nèi)容和第二頁頭部內(nèi)容重合。因為h1900這部分的內(nèi)容肯定會渲染,這部分內(nèi)容一直都是頁面元素,我們改變pages[1]的值的原因只是創(chuàng)建一個副本,讓頁面看起來內(nèi)容沒有被截斷。

          為了解決這個問題(為了美觀),我們用填充一塊白色區(qū)域遮掉它!此處使用jspdfrectsetFillColor方法,把重合的區(qū)域遮白處理。

          pdf.setFillColor(255, 255, 255);
          pdf.rect(x, y, Math.ceil(_width), Math.ceil(_height), 'F');
          

          如何獲得h1和h2

          上面我們談到了h1h2,其中h1是元素盒子的上邊距到打印區(qū)域的高度(比例縮放后的高度),h2是元素盒子的內(nèi)部高度。

          計算h1: getBoundingClientRect方法

          const rect=contentElement.getBoundingClientRect() || {};
          const topDistance=rect.top;
          return topDistance;
          

          Untitled6.png

          計算h2:offsetHeight方法

          Untitled7.png

          值得注意的是,因為打印區(qū)域的html元素不一定是從窗口頂部開始,所以為了計算實際的h1(元素到打印區(qū)域的頂部距離),可以采用這樣的方法:

          • getBoundingClientRect方法計算元素到窗口頂部的距離
          • 循環(huán)打印之前將pages信息針對第一個元素進行一個高度校準。
          // 對pages進行一個值的修正,因為pages生成是根據(jù)根元素來的,根元素并不是我們實際要打印的元素,而是element,
            // 所以要把它修正,讓其值是以真實的打印元素頂部節(jié)點為準
            const newPages=pages.map((item)=> item - pages[0]);
          

          在線demo演示和源代碼

          上述即是在實現(xiàn)前端頁面生成pdf的過程中遇到的問題,以及解決思路。

          為了更直觀得感受效果,本文也給出了不同場景(單頁、多頁、多頁截斷、自定義頁眉頁腳、橫向)下的pdf生成效果,可以通過此鏈接體驗:https://pdf-demo-phi.vercel.app/

          此demo的源代碼如下:pdf-demo

          與現(xiàn)有文章不同的是,本倉庫的代碼特點在于:

          • 支持設(shè)置pdf打印的方向,比如橫向
          • 修正了高度計算問題,解決了多出一個空白頁問題。掘金那篇文章計算元素高度時候沒有減去容器距離頂部高度,所以導(dǎo)致很多新手使用那份代碼的時候,會發(fā)現(xiàn)自己的頁面頂部被裁剪到了,原因就是這個
          • 支持自定義頁眉頁腳
          • 支持擴展自定義分頁方法,如果遇到復(fù)雜的組件,可以自定擴展邏輯計算高度

          作者:燕平

          來源:微信公眾號:Goodme前端團隊

          出處:https://mp.weixin.qq.com/s/-1nA-VI6kmgqHRcYs_NZFA

          # 一、前言

          數(shù)據(jù)能夠打印到pdf文件,當然可以打印到紙張,而且使用qprinter默認就是打印到紙張的,上一篇文章寫得功能是打印到pdf,其實還要單獨特殊設(shè)置打印到文件,并指定格式為pdf。不指定輸出文件和格式默認就是打印到紙張,關(guān)于Qt打印內(nèi)容到紙張,網(wǎng)上的辦法非常多,比如有些直接用painter繪制,逐步控制分頁打印,個人還是喜歡html格式的內(nèi)容傳入,因為html格式相當靈活,可控范圍相當大,而且整齊,甚至可以先直接輸出到網(wǎng)頁預(yù)覽下效果,根據(jù)需求調(diào)整,后面的圖文混排就是用的html+table實現(xiàn)的,如果不需要邊框可以設(shè)置邊框粗細為0,其實還是表格,但是看起來像文檔一樣。

          數(shù)據(jù)打印基本步驟:

          1. 準備好要打印的數(shù)據(jù)。

          2. 實例化QPrinter對象。

          3. 設(shè)置輸出格式setOutputFormat(QPrinter::NativeFormat)。

          4. 彈出打印預(yù)覽對話框QPrintPreviewDialog。

          5. 關(guān)聯(lián)信號槽在槽函數(shù)中繪制內(nèi)容。

          6. 實例化文檔對象QTextDocument。

          7. 將內(nèi)容作為html設(shè)置到文檔對象。

          8. 調(diào)用文檔對象的print方法傳入QPrinter對象打印。

          結(jié)構(gòu)體支持的參數(shù):

          - 文件名稱

          - 表名

          - 主標題

          - 副標題

          - 字段名稱集合

          - 字段寬度集合

          - 內(nèi)容集合

          - 行內(nèi)容分隔符

          - 子內(nèi)容分隔符

          - 邊框?qū)挾?/p>

          - 校驗列

          - 校驗類型

          - 校驗值

          - 檢驗顏色

          - 最后列拉伸填充

          - 橫向排版

          - 紙張邊距

          ## 二、功能特點

          1. 組件同時集成了導(dǎo)出數(shù)據(jù)到csv、xls、pdf和打印數(shù)據(jù)。

          2. 所有操作全部提供靜態(tài)方法無需new,數(shù)據(jù)和屬性等各種參數(shù)設(shè)置采用結(jié)構(gòu)體數(shù)據(jù),極為方便。

          3. 同時支持QTableView、QTableWidget、QStandardItemModel、QSqlTableModel等數(shù)據(jù)源。

          4. 提供靜態(tài)方法直接傳入QTableView、QTableWidget控件,自動識別列名、列寬和數(shù)據(jù)內(nèi)容。

          5. 每組功能都提供單獨的完整的示例,注釋詳細,非常適合各階段Qter程序員。

          6. 原創(chuàng)導(dǎo)出數(shù)據(jù)機制,不依賴任何office組件或者操作系統(tǒng)等第三方庫,支持嵌入式linux。

          7. 速度超快,9個字段10萬行數(shù)據(jù)只需要2秒鐘完成。

          8. 只需要四個步驟即可開始急速導(dǎo)出海量數(shù)據(jù)比如100W條記錄到Excel。

          9. 同時提供直接寫入數(shù)據(jù)接口和多線程寫入數(shù)據(jù)接口,不卡主界面。

          10. 可設(shè)置標題、副標題、表名。

          11. 可設(shè)置導(dǎo)出數(shù)據(jù)的字段名、列名、列寬。

          12. 可設(shè)置末尾列自動拉伸填充,默認拉伸更美觀。

          13. 可設(shè)置是否啟用校驗過濾數(shù)據(jù),啟用后符合規(guī)則的數(shù)據(jù)特殊顏色顯示。

          14. 可指定校驗的列、校驗規(guī)則、校驗值、校驗值數(shù)據(jù)類型。

          15. 校驗規(guī)則支持 精確等于==、大于>、大于等于>=、小于<、小于等于<=、不等于!=、包含contains。

          16. 校驗值數(shù)據(jù)類型支持 整型int、浮點型float、雙精度型double,默認文本字符串類型。

          17. 可設(shè)置隨機背景顏色及需要隨機背景色的列集合。

          18. 支持分組輸出數(shù)據(jù),比如按照設(shè)備分組輸出數(shù)據(jù),方便查看。

          19. 可設(shè)置csv分隔符、行內(nèi)容分隔符、子內(nèi)容分隔符。

          20. 可設(shè)置邊框?qū)挾取⒆詣犹顢?shù)據(jù)類型,默認自動數(shù)據(jù)類型開啟。

          21. 可設(shè)置是否開啟數(shù)據(jù)單元格樣式,默認不開啟,不開啟可以節(jié)約大概30%的文件體積。

          22. 可設(shè)置橫向排版、紙張邊距等,比如導(dǎo)出到pdf以及打印數(shù)據(jù)。

          23. 支持圖文混排導(dǎo)出數(shù)據(jù)到pdf以及打印數(shù)據(jù),自動分頁。

          24. 靈活性超高,可自由更改源碼設(shè)置對齊方式、文字顏色、背景顏色等。

          25. 支持任意excel表格軟件,包括但不限于excel2003-2021、wps、openoffice等。

          26. 純Qt編寫,支持任意Qt版本+任意編譯器+任意系統(tǒng)。

          ## 三、體驗地址

          1. 體驗地址:[https://pan.baidu.com/s/1ZxG-oyUKe286LPMPxOrO2A](https://pan.baidu.com/s/1ZxG-oyUKe286LPMPxOrO2A) 提取碼:o05q 文件名:bin_dataout.zip

          2. 國內(nèi)站點:[https://gitee.com/feiyangqingyun](https://gitee.com/feiyangqingyun)

          3. 國際站點:[https://github.com/feiyangqingyun](https://github.com/feiyangqingyun)

          4. 個人主頁:[https://blog.csdn.net/feiyangqingyun](https://blog.csdn.net/feiyangqingyun)

          5. 知乎主頁:[https://www.zhihu.com/people/feiyangqingyun/](https://www.zhihu.com/people/feiyangqingyun/)

          ## 四、效果圖

          ## 五、相關(guān)代碼


          主站蜘蛛池模板: 久久久久女教师免费一区| 精品爆乳一区二区三区无码av| 国产一区二区三区乱码| 毛片一区二区三区无码| 久久亚洲一区二区| 国产一区二区高清在线播放| 精品福利一区二区三区免费视频| 亚洲av无码一区二区三区乱子伦| 色视频综合无码一区二区三区 | 精品国产a∨无码一区二区三区| 精品天海翼一区二区| 日本免费一区二区三区最新| 亚洲国产精品一区二区三区在线观看 | 精品无码一区二区三区电影 | 久久精品免费一区二区喷潮| 亚洲欧洲精品一区二区三区| 无码一区二区三区老色鬼| 中文字幕一区二区日产乱码| 香蕉一区二区三区观| 亚洲一区二区精品视频| 中文字幕一区二区三区四区| 中文字幕无线码一区| 国产一区二区三区久久精品| 精品视频一区二区三区免费 | 精品一区二区三区在线视频观看| 国产Av一区二区精品久久| 免费精品一区二区三区在线观看 | 国产一区二区三区免费视频| 日本一区中文字幕日本一二三区视频| 成人精品一区久久久久| 一区二区三区久久精品| 中文字幕亚洲一区| 免费看一区二区三区四区| 亚洲国产老鸭窝一区二区三区 | 国产乱码伦精品一区二区三区麻豆| 亚洲高清成人一区二区三区| 无码国产精品一区二区免费式芒果 | 国产亚洲一区二区三区在线观看| 一区二区三区视频在线观看| 成人国产精品一区二区网站公司| 精品3d动漫视频一区在线观看|