vue html頁面打印功能vue-print

vue項目中,HTML頁面打印功能.在項目中,有時需要打印頁面的表格,

在網上找了一個打印組件vue-print-nb

 

本博客源碼:  https://github.com/shengbid/vue-demo  這個項目里會把平時博客寫的一些功能的代碼都放在里面,有需要可以下載看看,有幫助的話點個star哈

使用方式

安裝 npm install vue-print-nb --save

在main.js文件中注冊

import Print from 'vue-print-nb'

Vue.use(Print);

頁面中使用,給需要打印的容器加一個id,打印按鈕傳入這個id

html:

<div id="printMe" style="background:red;">
        <p>葫蘆娃，葫蘆娃</p>
        <p>一根藤上七朵花 </p>
        <p>小小樹藤是我家 啦啦啦啦 </p>
        <p>叮當當咚咚當當　澆不大</p>
        <p> 叮當當咚咚當當 是我家</p>
        <p> 啦啦啦啦</p>
        <p>...</p>
        <div class="describle">
          <el-form :model="form" :rules="rules" ref="from" class="demo-ruleForm">
            <el-form-item label="姓名:" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="描述:" prop="describle">
              <el-input
                :disabled="detail"
                type="textarea"
                :rows="4"
                :maxlength="2000"
                placeholder=""
                v-model="form.describle">
              </el-input>
            </el-form-item>
          </el-form>
        </div>
    </div>

    <button v-print="'#printMe'">Print local range</button>

　　

點擊打印按鈕,就可以打印頁面了

   

 

在使用這個插件過程中遇到一個問題,普通的input標簽內容展示沒問題,textarea文本域這種內容就展示不出來,檢查了一下插件,發現作者在給表單賦值的時候用的是value值,這種賦值對於一些雙標簽的表單就無效,需要修改一下

 

 

這種直接改包的方法也不太好,如果其他人下載你的代碼,也需要修改包,所以,最好把這個包拿出來,放在文件中,在main.js直接引用

 

main.js 引用  import Print from '@/utils/vue-print-nb/'

 

 

新增

最近有收到問題,打印頁面的標題是怎么設置的,我自己試了一下,發現使用之前的方法是undefined,去官網看了下,作者又修改了這個組件,現在變得更加可配置化了

 

 

現在傳入的是一個對象,

 

打印內容比較多時,使用vue-print-nb可能會出現排版問題,

這里補充一種先轉換成圖片在打印的方法:

 

<template>
  <div>
    <div id="printMe" ref="printContent">
      <ul class="content">
        <li>輕輕的我走了，</li>
        <li>輕輕的我走了，</li>
        <li>輕輕的我走了，</li>
        <li>輕輕的我走了，</li>
        <li>輕輕的我走了，</li>
        <li>輕輕的我走了，</li>
        <li>輕輕的我走了，</li>
        <li>輕輕的我走了，</li>
      </ul>
    </div>
    <el-button type="primary" @click="toImg">轉圖片打印</el-button>
    <el-button v-print="printObj" type="primary">直接打印</el-button>
    <img style="margin-top:20px;" :src="img" alt="">
  </div>
</template>

<script>
import html2canvas from 'html2canvas'  // 轉圖片打印需要先安裝html2Canvas和print-js
import printJS from 'print-js'
export default {
  data() {
    return {
      img: '',
      printObj: {
        id: 'printMe',
        popTitle: '打印',
        extraCss: 'https://www.google.com,https://www.google.com',
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
      }
    }
  },
  watch: {
  },

  created() {
  },
  methods: {
    toImg() { // 轉圖片打印
      html2canvas(this.$refs.printContent, {
        backgroundColor: null,
        useCORS: true,
        windowHeight: document.body.scrollHeight
      }).then((canvas) => {
        // let url = canvas.toDataURL('image/jpeg', 1.0)
        const url = canvas.toDataURL()
        this.img = url
        printJS({
          printable: url,
          type: 'image',
          documentTitle: '打印圖片'
        })
        console.log(url)
      })
    }
  }
}
</script>