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. echarts 总结

    ECharts访问链接 https://blog.csdn.net/Yi2008yi/article/details/122808328 :force-use-old-canvas="tru ...

  2. css 网页置灰

    body *{ -webkit-filter: grayscale(100%); /* webkit */ -moz-filter: grayscale(100%); /*firefox*/ -ms- ...

  3. leecode76. 最小覆盖子串

    76. 最小覆盖子串 给你一个字符串 s .一个字符串 t .返回 s 中涵盖 t 所有字符的最小子串.如果 s 中不存在涵盖 t 所有字符的子串,则返回空字符串 "" . 注意: ...

  4. leecode64. 最小路径和(动态规划)

    64. 最小路径和 给定一个包含非负整数的 m x n 网格 grid ,请找出一条从左上角到右下角的路径,使得路径上的数字总和为最小. 说明:每次只能向下或者向右移动一步. 示例 1: 输入:gri ...

  5. kunkun

    <html> <head> <title>cxk</title> </head> <body><h1>给设计师:字体 ...

  6. .net core 根据需求不同的数据有不同的颜色

  7. Spring 事务传播属性

    Spring 事务相关 3 个 API 定义类 Spring 事务底层 API 定义主要有 PlatformTransactionManager.TransactionDefintion 和 Tran ...

  8. uniapp 小程序自定义组件样式穿透问题

    1.正在开发时发现自定义组件间样式发生穿透问题 2.主需要引入下面代码可解决 export default { options: { //默认值 isolated(启动隔离) //apply-shar ...

  9. Docker CLI docker buildx 常用命令

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux或Windows操作系统的机器上,也可以实现虚拟化.Docker是内核 ...

  10. 微信小程序云开发使用Typescript

    1.首先参考陈希章@中国在微信小程序开发中使用Typescript中的内容了解相关的内容 2.按以下步聚进行设置 1)确认本机环境已安装npm.通过在安装目录下输入 npm --v 如返回具体的版本, ...