vue 使用print.js 打印文本,HTML元素,圖片,PDF

• 安裝

npm install print-js --save

• 示例

<template><div class="print-example"><h2>Print.js 打印示例</h2><!-- 打印區域 --><div id="printableArea" class="printable-area"><h3>這是要打印的內容</h3><p>這是一段示例文本，將會被打印出來。</p><img src="https://picsum.photos/400/200" alt="示例圖片" class="print-image"><table border="1" cellpadding="8" class="print-table"><tr><th>姓名</th><th>年齡</th></tr><tr><td>張三</td><td>25</td></tr><tr><td>李四</td><td>30</td></tr></table></div><!-- 打印按鈕組 --><div class="print-buttons"><button @click="printText">打印文本</button><button @click="printHtml">打印HTML元素</button><button @click="printImage">打印圖片</button><button @click="printPdf">打印PDF</button></div></div>
</template><script>
import print from 'print-js'
import 'print-js/dist/print.css'export default {methods: {// 打印文本printText() {print({printable: '這是一段要打印的文本內容。可以包含多行\n換行文本。',type: 'raw-html',header: '文本打印示例',style: 'p { color: #333; font-size: 14px; }'})},// 打印HTML元素printHtml() {print({printable: 'printableArea', // 元素IDtype: 'html',header: 'HTML內容打印',headerStyle: 'font-size: 18px; color: #666;',maxWidth: 800,// 自定義打印樣式style: `.printable-area { padding: 20px; }.print-table { width: 100%; border-collapse: collapse; margin-top: 10px; }.print-image { margin: 10px 0; max-width: 100%; }`})},// 打印圖片printImage() {print({printable: 'https://picsum.photos/800/600', // 圖片URLtype: 'image',header: '圖片打印示例',imageStyle: 'max-width: 100%; height: auto;'})},// 打印PDFprintPdf() {// 注意：打印PDF需要PDF文件的URL// 這里使用示例PDF，實際項目中替換為你的PDF地址print({printable: 'https://sample-videos.com/pdf/Sample-PDF-100kb.pdf',type: 'pdf',showModal: true, // 顯示加載中模態框modalMessage: '正在準備PDF文件，請稍候...'})}}
}
</script><style scoped>
.print-example {max-width: 800px;margin: 20px auto;padding: 20px;
}.printable-area {border: 1px solid #ddd;padding: 20px;margin-bottom: 20px;
}.print-buttons {display: flex;gap: 10px;flex-wrap: wrap;
}button {padding: 8px 16px;background-color: #42b983;color: white;border: none;border-radius: 4px;cursor: pointer;
}button:hover {background-color: #359e75;
}.print-image {max-width: 100%;height: auto;
}.print-table {width: 100%;border-collapse: collapse;margin-top: 10px;
}
</style>