ToB企服应用市场:ToB评测及商务社交产业平台

标题: 前端打印(html) [打印本页]

作者: 南七星之家 时间: 2024-12-20 08:15
标题: 前端打印(html)
目录

1.window.print()
2.使用插件print.js
1.window.print()

<template>
    <div id="contenteBox">内容</div>
    <button @click="printContent">打印</button>
  </template>
  <script>
    export default{
    data(){
    return{}
    },
    methods:{
    printContent(){
    let contentDom=document.getElementById('contenteBox')
    let html=`
    <head>
    <style lang='scss'>
    #contenteBox{font-size:18px;background-color:#333}
    <style>
    </head>
    <body>${contentDom.innerHTML}</body>
    `
    window.print()
    }
    }
    }
  </script>
  let contentDom=document.getElementById('contenteBox') //获取id为contenteBox的dom元素
html //设置打印主体以及css样式
window.print() //打印
也可以let bodyContent = document.getElementById('contenteBox').innerHTML 通过获取需要打印的元素
通过 document.body.innerHTML=bodyContent 把当前页面替换为打印内容HTML
window.print()打印 //记得最后还原页面
2.使用插件print.js

2.1 vue2

https://www.npmjs.com/package/print-js

npm install print-js --save

复制代码

yarn add print-js

复制代码

import printJS from 'print-js'

复制代码

<template> <div> <button @click="printContent">打印</button> <div id="contenBox"> <div>内容</div> </div> </div></template><script>import printJS from 'print-js'
;export default { methods: { printContent() { printJS({ printable: 'contenBox', type: 'html', documentTitile:'打印', style: ` #contenBox{ color:#333, font-size:20px } ` }); } }};</script>

复制代码

printable 文档来源
type 打印类型
documentTitle 打印显示的文档标题
style 自界说样式
2.2 vue3

<template> <div> <button @click="printContent">打印</button> <div ref="contenBox"> <div>内容</div> </div> </div></template><script>import printJS from 'print-js'
;let contenBox=ref()function printContent() { printJS({ printable: 'contenBox', type: 'html', documentTitile:'打印', style: ` #contenBox{ color:#333, font-size:20px } ` }); }</script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)