使用的一个叫做“vue-print-nb”的插件，具体步骤：
1 下载插件
npm install vue-print-nb --save
2 在main导入并注册
// 打印
import Print from 'vue-print-nb'
// 注册
Vue.use(Print)
3 在vue文件使用
- 在需要打印的区域添加一个id
- 给打印按钮添加一个
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
网友评论