vue ----》實現打印功能

1.安裝打印相關依賴

cnpm install vue-print-nb --save

2.安裝后，在main.js文件中引入

import Print from 'vue-print-nb'

Vue.use(Print);  //注冊

3.在頁面中直接進行調用

<template>
    <div>
        <div id="printTest" style="width: 100%;text-align:center">
            <p style="font-size:40px">哈哈哈</p>
            <el-table :data="tableData" style="width: 60%;margin-left:100px">
                <el-table-column prop="date" label="日期" width="180">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="180">
                </el-table-column>
                <el-table-column prop="address" label="地址">
                </el-table-column>
            </el-table>
        </div>

        <button v-print="'#printTest'">打印</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀區金沙江路 1518 弄"
                },
                {
                    date: "2016-05-04",
                    name: "王小虎",
                    address: "上海市普陀區金沙江路 1517 弄"
                },
                {
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "上海市普陀區金沙江路 1519 弄"
                },
                {
                    date: "2016-05-03",
                    name: "王小虎",
                    address: "上海市普陀區金沙江路 1516 弄"
                }
            ]
        };
    }
};
</script>

<style lang="scss" scoped>
</style>

注意：打印的樣式遵循頁面的CSS樣式；

　　　具體打印設置可直接在調用的打印機上進行格式的設置

　　　如果打印的內容有圖片（即頁面存在<img>標簽），需將圖片格式轉換為  base64   或者   引用線上的圖片地址