vue项目实现打印功能

使用的一个叫做“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
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 写在前面的话 代码中的# > 表示的是输出结果 输入 使用input()函数 用法 注意input函数输出的均是字...
    FlyingLittlePG阅读 2,943评论 0 8
  • vue项目中,HTML页面打印功能.在项目中,有时需要打印页面的表格, 在网上找了一个打印组件vue-print-...
    杀个程序猿祭天阅读 2,691评论 0 1
  • 基于Vue的一些资料 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 element★...
    尝了又尝阅读 1,187评论 0 1
  • 酣眠际刻,畅梦时分。 冽气袭衾,寒风贯骨。 闻零落金击之传声,晓绵润阴濡之降雨。 褰裯端驱,攫斓袄以迣体。 蔽昊高...
    杨含章阅读 716评论 2 4
  • 基本概念 另外,像素是px。不用多说。 基本计算公式 android中的dp在渲染前会将dp转为px,计算公式:p...
    Android小马哥阅读 958评论 1 23