LODOP 列印圖片和表格
因為專案需要,需要做個列印產品發貨明細。
之所以找到這個是因為看了好多大佬的推薦,這個外掛不錯
以下是官網:http://www.c-lodop.com/LodopDemo.html
一開始在官網找了好久,發現沒有圖片和表格一起列印的,就自己去試試
領導給我的是一個excel,裡面放了大概是這樣的
當然圖片不是這個,為了隱私問題,特意找了自己的賬號截圖
思路:
1.我沒有去找相關找列印excel的是因為我要往表格動態填資料非常麻煩【其實也不是很麻煩】,我就想到,把這個excel的模板弄成網頁,用table展示就行了
2.對比列印的屬性[https://www.cnblogs.com/huaxie/p/10212656.html]
ADD_PRINT_TABLE 特點:不切行,只能輸出一個table,巢狀複雜等表格不行。
當某一行高超過列印項高度時,不會按照列印項高度分頁,不切行,而是輸出整個行,行跨頁隱藏後面的內容,不會分到下一頁。
如圖-----達到了紙張的最下方,下面既沒有表格線,後面的內容也沒有分到下一頁,該超大行後面的內容相當於不列印隱藏了。
ADD_PRINT_HTM特點:切行沒切字,補充了表格線,該超大行分頁後成了多行。
如圖-----基本按照列印設計列印項高度分頁,只是列印設計裡高度在最後一句,列印設計設計的高度是稍稍小於該文字的,但是ADD_PRINT_HTM沒有切字,而是把最後一行字顯示全了,並且該大行分頁後補全了表格線,本來是兩行三列的表格,補完橫線後,看起來是兩行變成了四行,切行的都補了線。
ADD_PRINT_HTML特點:切行切字,不補表格線,類似截圖,把內容當圖截了。
我自己也去對比測試了,我最後選用了ADD_PRINT_HTM
遇到的坑:
1.因為我公司的印表機有兩個幾盒,對應的紙盒紙張不一樣,一開始列印的時候,老是不對勁,因為預設選擇紙盒1,紙盒1的紙張不是A4。
調整 LODOP.PRINT_DEFAULTSOURCE = 7;7表示自動選擇
LODOP.SET_PRINT_PAGESIZE(1, 0, 0, “A4”); //1豎版 2橫版 A4紙是橫版還是豎版列印
2.調整紙張位置
LODOP.ADD_PRINT_HTM(0, 0, ‘100%’, ‘100%’, document.getElementById(“tableJY”).innerHTML);
<!DOCTYPE html>
<html lang="zh-cn"">
<head>
<meta charset=" UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>寄樣清單</title>
<style>
.table-box {
display: inline-block;
}
.table-body table {
width: 100%;
}
td {
max-width: 300px;
text-align: center;
}
</style>
</head>
<body>
<div class="table-box">
<div class="table-header">
<img src="./img/img_header.png">
</div>
<div class="table-body">
<h2 style="text-align: center; border-top: 2px solid black;padding-top: 10px;">寄樣清單</h2>
<table cellspacing="15">
<tr>
<th>客戶名稱:</th>
<td>莊嚴貿易有限公司</td>
<th>聯絡人:</th>
<td>牛女士</td>
<th>寄樣日期:</th>
<td>2020/9/13</td>
</tr>
<tr>
<th>客戶地址:</th>
<td>廣東省廣州市白雲區YH城</td>
<th>聯絡電話:</th>
<td>18326913045</td>
<th>是否收費:</th>
<td>否</td>
</tr>
</table>
<table border="1" cellspacing="0">
<tr>
<th>序號</th>
<th>系列名稱</th>
<th>屬性</th>
<th>規格</th>
<th>配方編碼</th>
<th>數量</th>
<th>功效簡介</th>
</tr>
<tr>
<td>1</td>
<td>微雕緊塑逆齡方案</td>
<td>凍幹類</td>
<td>40mg×10/板</td>
<td>VS-07</td>
<td>1</td>
<td>7天明顯見效!全方位淡紋、緊緻、實現逆齡養護!
緊緻嫩膚效果明顯!</td>
</tr>
<tr>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table cellspacing="15">
<tr>
<td style="text-align: left;">總辦:</td>
<td style="text-align: left;">財務:</td>
<td style="text-align: left;">業務:</td>
</tr>
</table>
</div>
</div>
</body>
<script>
var LODOP; //宣告為全域性變數
function prn2_preview() {
LODOP = getLodop();
LODOP.PRINT_INIT("");
LODOP.PRINT_DEFAULTSOURCE = 7;//選擇印表機的紙盒
LODOP.PRINT_INITA(0, 0, '100%', '100%', "");
LODOP.SET_PRINT_PAGESIZE(1, 0, 0, "A4"); //A4紙 1豎版 2橫版
LODOP.ADD_PRINT_HTM(0, 0, '100%', '100%', document.getElementById("tableJY").innerHTML);
LODOP.PRINT_DESIGN();
// LODOP.PRINTA();
//LODOP.PREVIEW();
};
</script>
</html>
以上就是列印的前端頁面的程式碼,非常贊,感謝大佬的分享,讓我少走了很多彎路
相關文章
- lodop列印控制元件的使用控制元件
- Java 讀取Word表格中的文字和圖片Java
- 標籤列印軟體中如何迴圈列印點陣圖圖片
- Python資料展示 - 生成表格圖片Python
- win10 64位如何安裝lodop控制元件_win10安裝lodop列印控制元件詳細教程Win10控制元件
- Excel怎麼批次刪除表格中的圖片?Excel一次性刪除表格中所有圖片教程Excel
- docx轉html方案驗證-支援latex,表格,圖片(aspose)HTML
- docx轉html方案驗證-支援latex,表格,圖片(poi)HTML
- Python 在Word中建立表格並填入資料、圖片Python
- Java 讀取Word文字框中的文字/圖片/表格Java
- excel表格列印預覽不完整如何調整 excel表格列印不完整怎麼辦Excel
- python如何以表格形式列印輸出Python
- 思維導圖和表格用例
- python使用flask框架生成excle返回前端(包含圖片、表格、表頭灰色、表格加邊框)PythonFlask框架前端
- 怎麼把Excel 表格轉成PNG、JPEG、GIF圖片格式 ?Excel
- C# 讀取Word文字框中的文字、圖片和表格(附VB.NET程式碼)C#
- 為什麼CAD圖紙列印預覽一片空白?
- win11 下 利用 PowerShell 提取 wps 表格中嵌入的圖片
- Excel表格中圖片怎麼固定在單元格里(VBA方法)Excel
- HTML 連結和圖片HTML
- PDF 和圖片互轉
- 『ios』view和tableview的截圖和圖片拼接iOSView
- win10列印圖片顯示遇到異常怎麼辦 windows10的系統列印圖片時出現錯誤怎麼解決Win10Windows
- Office辦公 Excel表格列印技巧你知道多少?Excel
- 輸入2,5,列印:1-10 表格
- excel列印虛線怎麼調整 excel表格有虛線列印不完整Excel
- Python 提取PDF文字和圖片Python
- Android 和 iOS 圖片輪播AndroidiOS
- python使用pillow和opencv生成圖片縮圖PythonOpenCV
- 要優雅!Android中這樣載入大圖片和長圖片Android
- Spring Boot MVC 單張圖片和多張圖片上傳 和通用檔案下載Spring BootMVC
- obsidian和typora圖片相容問題
- python request.post圖片和字典Python
- Artstudio Pro Mac,繪圖和圖片編輯工具Mac繪圖
- Java的圖形列印Java
- CAD列印圖形教程
- 圖片抓取_千圖網圖片抓取
- 圖片平滑 圖片增強