vue项目实现打印功能

2020-03-26  本文已影响0人  neumeng

使用的一个叫做“vue-print-nb”的插件,具体步骤:

1 下载插件

npm install vue-print-nb --save

2 在main导入并注册

// 打印
import Print from 'vue-print-nb'
// 注册
Vue.use(Print)

3 在vue文件使用

  1. 在需要打印的区域添加一个id
  2. 给打印按钮添加一个v-print指令,如:v-print="printID"

具体代码如下:

<div id="printDiv">
     打印的内容
</div>  
<button v-print="'#printDiv'">打印地图</button>

4 效果

4.1 关键代码

<template>
    <div>
        //省略一些代码
        <el-button type="primary" v-print="'#baidumap'">打印</el-button>
        //省略一些代码
        <baidu-map id="baidumap">
          //省略一些代码
        </baidu-map>
    </div>
</template>

4.2 显示效果

地图打印.png
上一篇 下一篇

猜你喜欢

热点阅读