# JavaScript怎么打印div元素的內容
## 前言
在Web開發中，經常需要將頁面的特定區域（如`<div>`元素）的內容打印出來。這可能是為了生成報表、保存頁面快照或提供打印友好視圖。JavaScript提供了多種方法來實現這一需求，本文將深入探討6種主流方案，并分析其適用場景與優缺點。
---
## 方法一：使用window.print()與打印樣式表
### 基本實現
```javascript
function printDiv(divId) {
const printContents = document.getElementById(divId).innerHTML;
const originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
function printDivAdvanced(divId) {
const printWindow = window.open('', '_blank');
printWindow.document.write('<html><head><title>打印</title>');
printWindow.document.write('<link rel="stylesheet" href="print.css" media="print">');
printWindow.document.write('</head><body>');
printWindow.document.write(document.getElementById(divId).innerHTML);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.onload = () => {
printWindow.print();
printWindow.close();
};
}
| 優點 | 缺點 |
|---|---|
| 簡單直接 | 會破壞原頁面DOM |
| 兼容性好 | 丟失事件監聽器 |
| 支持CSS打印樣式 | 可能觸發頁面重排 |
/* print.css */
@media print {
body * {
visibility: hidden;
}
#printableDiv, #printableDiv * {
visibility: visible;
}
#printableDiv {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
}
function printWithCSS(divId) {
const style = document.createElement('style');
style.innerHTML = `@media print {
body * { visibility: hidden; }
#${divId}, #${divId} * { visibility: visible; }
#${divId} { position: absolute; left: 0; top: 0; }
}`;
document.head.appendChild(style);
window.print();
document.head.removeChild(style);
}
import html2canvas from 'html2canvas';
async function printDivAsImage(divId) {
const element = document.getElementById(divId);
const canvas = await html2canvas(element, {
scale: 2, // 提高分辨率
logging: false,
useCORS: true
});
const printWindow = window.open('', '_blank');
printWindow.document.write('<img src="' + canvas.toDataURL() + '" style="max-width:100%;">');
printWindow.document.close();
printWindow.onload = () => {
printWindow.print();
setTimeout(() => printWindow.close(), 500);
};
}
useCORSimport jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
async function printDivAsPDF(divId) {
const element = document.getElementById(divId);
const canvas = await html2canvas(element, { scale: 2 });
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({
orientation: element.offsetWidth > element.offsetHeight ? 'l' : 'p',
unit: 'mm'
});
const pageWidth = pdf.internal.pageSize.getWidth();
const pageHeight = pdf.internal.pageSize.getHeight();
const imgRatio = canvas.width / canvas.height;
const pdfRatio = pageWidth / pageHeight;
let width, height;
if (imgRatio > pdfRatio) {
width = pageWidth;
height = width / imgRatio;
} else {
height = pageHeight;
width = height * imgRatio;
}
pdf.addImage(imgData, 'PNG', 0, 0, width, height);
pdf.autoPrint();
window.open(pdf.output('bloburl'));
}
function printDivWithIframe(divId) {
const iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);
const doc = iframe.contentWindow.document;
doc.open();
doc.write(`
<!DOCTYPE html>
<html>
<head>
<title>打印預覽</title>
<link rel="stylesheet" href="${window.location.origin}/styles.css">
</head>
<body>
${document.getElementById(divId).innerHTML}
</body>
</html>
`);
doc.close();
iframe.contentWindow.onload = () => {
iframe.contentWindow.print();
setTimeout(() => document.body.removeChild(iframe), 1000);
};
}
import printJS from 'print-js';
function printWithLibrary(divId) {
printJS({
printable: divId,
type: 'html',
css: [
'/css/main.css',
'/css/print.css'
],
scanStyles: false,
targetStyles: ['*']
});
}
| 方法 | 復雜度 | 保真度 | 資源消耗 | 適用場景 |
|---|---|---|---|---|
| window.print() | ★☆☆ | ★★☆ | 低 | 簡單內容快速打印 |
| CSS媒體查詢 | ★★☆ | ★★★ | 最低 | 需要保留頁面狀態 |
| Canvas圖像 | ★★★ | ★★☆ | 高 | 復雜視覺效果 |
| PDF生成 | ★★★★ | ★★★ | 高 | 需要存檔/分享 |
| iframe隔離 | ★★★ | ★★★ | 中 | 企業級應用 |
| Print.js | ★★☆ | ★★★ | 中 | 現代化項目 |
@media print { a::after { content: ” (” attr(href) “)”; } }
2. **性能優化**：
```javascript
// 延遲加載打印資源
function loadPrintResources() {
return new Promise(resolve => {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'print.css';
link.media = 'print';
link.onload = resolve;
document.head.appendChild(link);
});
}
async function safePrint(divId) {
try {
await printDivAsPDF(divId);
} catch (error) {
console.error('打印失敗:', error);
fallbackPrint(divId); // 回退到簡單方案
}
}
Q1: 如何打印背景顏色？
// 在Chrome中需要啟用打印背景設置
const style = document.createElement('style');
style.innerHTML = `
@media print {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
`;
Q2: 分頁控制怎么做？
.page-break {
page-break-after: always;
break-after: page;
}
Q3: 如何去掉頁眉頁腳？
@page {
margin: 0;
size: auto;
}
選擇適合的打印方案需要綜合考慮項目需求、瀏覽器兼容性和用戶體驗。對于簡單需求，CSS媒體查詢是最輕量級的方案；而需要精確控制打印輸出時，PDF生成方案可能更合適?，F代JavaScript庫如Print.js提供了開箱即用的解決方案，值得在新項目中嘗試。
隨著Web技術的進步，未來可能會出現更強大的打印API（如CSS Paged Media Module的全面支持），開發者應持續關注相關標準的發展。 “`
注：本文實際約2300字，包含： - 6種詳細實現方案 - 10個代碼示例 - 3個對比表格 - 實用技巧和常見問題解答 - 完整的Markdown格式結構
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
