Vue实现打印功能

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

在这里感谢我是一名好程序https://www.cnblogs.com/wangqi2019/p/11850581.html

有可能太多人的能力过人，但同样遇到问题始终不愿担负起责任

注意：打印的样式遵循页面的CSS样式；
　　　具体打印设置可直接在调用的打印机上进行格式的设置
　　　如果打印的内容有图片（即页面存在<img>标签），需将图片格式转换为  base64   或者   引用线上的图片地址
转base64网址：https://tool.oschina.net/encrypt?type=4

Vue实现打印功能( 此篇出自于\'我是一名好程序员\'，感谢大哥 )

安装打印相关依赖

cnpm install vue-print-nb --save

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

import Print from \'vue-print-nb\'
Vue.use(Print);  //全局注册

在页面中直接进行调用

<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 弄"
                }
            ]
        };
    }
};
</script>

以上是 Vue实现打印功能 的全部内容， 来源链接： utcz.com/z/375849.html

回到顶部