当前位置：首页 > news >正文

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

news 2025/9/17 5:37:09

安装

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>