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. MS14-064/CVE-2014-6332漏洞复现(OLE远程代码执行漏洞、IE浏览器漏洞)

    漏洞介绍:MS14-064 Microsoft Internet Explorer Windows OLE Automation Array Remote Code Execution,主要利用IE浏 ...

  2. Django 之RestFramework

    1. 从request先说起 在Django原生的request里,请求的数据可以从request.GET或者request.POST里面取到. 需要注意的是,如果是POST请求,request.PO ...

  3. chrome 检查更新时出错:无法启动更新检查(错误代码为 4: 0xA0430817 -- system level)

    Windows系统谷歌浏览器 Chrome 检查更新时出错:无法启动更新检查(错误代码为 4: 0x80070005 -- system level)该怎么办? 这很有可能是 Chrome 更新服务被 ...

  4. XXE漏洞初步练手

    0x00:XXE定义 xml外部实体注入被我们称为XXE.因为实体可以通过预定义在文档中被调用,而实体的标识符又可以访问本地或者远程内容,当允许引用外部实体时,攻击者便可以构造恶意内容来达到攻击.

  5. 关于CMDB

    关于CMDB: CMDB运维管理平台是由CMDB开发团队,针对目前服务器运维.监控,批量管理提出的一个开源. 易用.实用的跨平台服务器运维管理平台. 统筹来说cmdb就是将已有的规则化运维技术规则到运 ...

  6. EL表达式读取属性不存在的异常,读取类的属性不存在,无法调用到该属性

    修改类中的名称,必须要符合2JavaBaen要求,否则EL表达式读取不到.

  7. 利用拉格朗日乘子法从最优化问题中推导出KKT条件

    优化问题的一般形式 在优化问题中,我们将其一般形式定义为有约束(不等式约束.等式约束)的最小化优化问题,其具体定义如下: \[\begin{array}{ll} \min _{x} & f_{ ...

  8. React 使用链表遍历组件树

    React 为在有限的资源情况下,更好地控制UI的更新,提出了时间分片的概念.以达到三个目标: performing non-blocking rendering(无阻塞渲染):applying up ...

  9. 处理Android的物理后退按钮

    在文章.聊天.联系.相册四个页面时,用户点击Android 物理键返回,需要直接退出程序.我这里处理很简单,直接使用react-navigation的属性backbehavior就很快的解决了. &l ...

  10. 【转】【善用佳软】文件复制软件评测:FastCopy、TeraCopy、ExtremeCopy、Supercopier

    文件复制软件评测:FastCopy.TeraCopy.ExtremeCopy.Supercopier 原文:https://xbeta.info/fastcopy-teracopy-extremeco ...