目錄

1. js打印

2. Vue實現打印

---

1. js打印

• 原生js，頂級對象window有一個print方法，可以實現打印

<div class="box">123</div><button class="btn">打印</button><script>const box = document.querySelector('.box')const btn = document.querySelector('.btn')btn.addEventListener('click', function () {window.document.body.innerHTML = window.document.querySelector('.box').innerHTML// window.document.body.style.backgroundColor = '#fff'window.print()window.location.reload()})</script>

2. Vue實現打印

• 借助vue-print-nb插件，使用v-print指令

首先下載vue-print-nb插件

npm install vue-print-nb --save
或? yarn add?vue-print-nb

然后在mian.js中引入并全局掛載

import Vue from 'vue' import App from './App.vue' // 引入vue-print-nb import print from 'vue-print-nb'Vue.config.productionTip = falseVue.use(print) // 注冊new Vue({render: (h) => h(App), }).$mount('#app')

就可以進行使用了

<template><div id="app">123<el-button v-print="printObj">打印</el-button></div> </template><script> export default {name: 'app',data() {return {// 打印對象printObj: {id: 'app', // 指定區域，需要打印的區域只需要加個id，并且id值為app即可popTitle: '標題', // 指定標題},}} } </script>

總結

以上是生活随笔為你收集整理的js打印和vue打印的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。