1、安装

npm install print-js --save

2、引用

import print from 'print-js'

3、编写打印函数

const enterDialog = async () => {
const style = '@page {margin:0mm 10mm};'//打印时去掉眉页眉尾
printJS({
printable: 'print',// 标签元素id
type: 'html',
header: '',
targetStyles: ['*'],
style
});
}

4、调用函数

<table id="print"></table>
<div class="dialog-footer" style="text-align: center; position: absolute;top: 80px;right: 20px;">
<el-button size="large" @click="enterDialog" style="margin: 5px;">打 印</el-button><br>
<el-button size="large" @click="closeDialog" style="margin: 5px;">取 消</el-button>
</div>

打印最好使用原生table标签,不然可能会出现很大的样式问题

 

vue 3 打印 print-js的更多相关文章

  1. vue 中使用print.js 打印遇到的问题 ?

    不管怎么设置打印部分的 margin和height 仍会在预览时多出一张空白页?求各位大佬遇到过的请留言谢谢!

  2. 打印-print.js

    //打印开始// strPrintName 打印任务名// printDatagrid 要打印的datagridfunction CreateFormPage(ctx,strPrintName, pr ...

  3. 使用那各VUE的打印功能(print.js)出现多打印一个空白页的问题

    最近这段时间,用VUE写东西,有个打印功能. 百度了一下,铺天盖地的VUE打印的两种实现方法. 很感激这些千篇一律的帖子,虽然不知道他们是否真的用过,还是只是复制粘贴. 至少这些帖子告诉我,是有两个可 ...

  4. 前端网页打印插件print.js(可导出pdf)

    在前端开发中,想打印当前网页的指定区域内容,或将网页导出为多页的PDF,可以借助print.js实现,该插件轻量.简单.手动引入.不依赖其他库.示范项目github:https://github.co ...

  5. vue实现打印功能的两种方法

    第一种方法:通过npm 安装插件 1,安装  npm install vue-print-nb --save 2,引入  安装好以后在main.js文件中引入 import Print from 'v ...

  6. Atom 编辑器安装 linter-eslint 插件,并配置使其支持 vue 文件中的 js 格式校验

    安装方式有如下几种. 1.最常用的安装方式. # 进入atom插件文件夹 cd ~/.atom/packages/ # git clone 插件源文件 git clone https://github ...

  7. vue中config/index.js:配置的详细理解

    当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面  (环境变量及其基本变量的配置) var path = require('path') ...

  8. Vue在单独引入js文件中使用ElementUI的组件

    Vue在单独引入js文件中使用ElementUI的组件 问题场景: 我想在vue中的js文件中使用elementUI中的组件,因为我在main.js中引入了element包和它的css,并挂载到了全局 ...

  9. 解决VSCode中使用vetur插件格式化vue文件时,js代码会自动加上冒号和分号

    解决VSCode中使用vetur插件格式化vue文件时,js代码会自动加上冒号和分号 在设置中把"vetur.format.defaultFormatter.js": " ...

  10. print.js继承原有样式

    npm install --save print-js import Print from 'print-js' 调用print.js插件 Print({ printable: 'printJS-fo ...

随机推荐

  1. linux开机出现grub界面

    今天开机时候突然出现grub界面,并且卡在这里,记录一下解决办法 ①输入ls 2. 输入ls (hd0,6)/ 可以看到返回的就是linux系统的根目录,说明这个磁盘就是我们的系统的所在盘 如果ls ...

  2. SAR成像(六):距离徙动矫正

    1.什么是距离徙动? 距离徙动产生原因是合成孔径雷达的运动平台与目标之间的相对运动.对于地面一静止的点目标,当它处于雷达波束照射范围内的时间中时,随着飞行载体的运动,它与雷达飞行载体之间的距离会不断的 ...

  3. 【SSO单点系列】(4):CAS4.0 之非Ajax-iframe 登录

    一.描述 不使用Ajax-iframe 登录 仍然要自定义页面 二.思路: 将数据提交给服务器登录页面,服务登录页面自动提交. 三.实现 1.客户端 <form name="login ...

  4. CentOS 7.9 环境下添加拥有 sudo 权限的用户

    # 以root权限执行以下操作 # 添加用户 useradd vbird # 为用户设置密码 passwd vbird # Changing password for user vbird. # Ne ...

  5. vue去除富文本的标签和样式

    vue利用正则去除富文本的标签和样式 ts: const removeHtmlStyle =(html :any)=> { let relStyle = /style\s*?=\s*?(['&q ...

  6. 记:java.lang.IllegalArgumentException: DAY_OF_MONTH 报错

    查询的时候报错: 月份中的天数错误 原因:  date日期列中有数据错误 修改数据库中错误的数据就可以了.

  7. vue3 自定义组件中使用 v-model

    1.直接绑定 v-model,但是 Props 要固定为 modelValue 组件D: 注意这里的 Props 和 Emits,必须使用 Vue 提供的 defineProps() 和 define ...

  8. 17.SQLite数据库存储

    Android系统内置一个SQLite数据库,SQLite是一款轻量级的关系型数据库,它的运算速度非常快,占用资源很少,通常只需要几百K的内存就足够了. SQLite不仅支持标准的SQL语法,还遵循了 ...

  9. brew mongodb 安装 使用 brew update

    参考: 菜鸟教程 https://www.runoob.com/mongodb/mongodb-osx-install.html https://juejin.cn/post/697403663320 ...

  10. Visio中的图无失真导入LaTeX中

    参考网址: LaTeX导入图片不失帧的方法_奋斗的西瓜瓜的博客-CSDN博客_latex图片模糊 LaTeX中插入eps格式图片_不觉岁华成暗度的博客-CSDN博客_eps latex Visio图片 ...