<template> <div id="app"> <button v-print='printObj'>Print the entire page</button> <div id="printMe" style="background:red;"> <div ref="qrcode"></div> <input type="number"> <input type="time"> <input type="checkbox"> <input type="radio"> <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> <textarea name="" id="" cols="30" rows="10"></textarea> <p>钁姦濞冿紝钁姦濞�</p> <p style="background:yellow;">涓€鏍硅棨涓婁竷鏈佃姳 </p> <p>灏忓皬鏍戣棨鏄垜瀹� 鍟﹀暒鍟﹀暒 </p> <p>鍙綋褰撳挌鍜氬綋褰撱€€娴囦笉澶�</p> <p> 鍙綋褰撳挌鍜氬綋褰� 鏄垜瀹�</p> <p> 鍟﹀暒鍟﹀暒</p> <p>...</p> </div> </div> </template> <style type="text/css"> p { color: blue; } </style> <script> import QRCode from 'qrcodejs2'; export default { name: 'app', data() { return { printObj: { id: "printMe", popTitle: 'good print', extraCss: 'https://www.baidu.com/,https://www.baidu.com/', extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>' } }; }, mounted() { this.$nextTick(() => { new QRCode(this.$refs.qrcode, { width: 100, height: 100, text: 'https://www.baidu.com/' }) }) } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>