前端实现打印功能Print.js

前端实现打印的方式有很多种,本人恰好经历了几个项目都涉及到了前端打印,目前较为推荐Print.js来实现前端打印

话不多说,直接上教程

官方链接: Print.js官网
在这里插入图片描述

  1. 在项目中如何下载Print.js

    使用npm下载:npm install print-js --save
    使用yarn下载: yarn add print-js

  2. 在项目中如何引入print.js

// 第一种 通过import的方式引入
import print from 'print-js'// 第二种 通过CDN  
https://printjs-4de6.kxcdn.com/print.min.js
https://printjs-4de6.kxcdn.com/print.min.css的方式引入<script src="print.js"></script>
<link rel="stylesheet" type="text/css" href="print.css"> //使用Print.js模版的时候引入
  1. print.js的参数配置(常用)
参数描述
printable(默认null)pdf或图像的url,html元素的id或json数据的对象
type打印的类型(默认pdf) pdf, html, image, json and raw-html.
css打印的css,可以是单个URL的字符串,也可以是多个URL的数组
style格式为一个字符串,该字符串应该应用于正在打印的html样式
targetStyles打印的样式数值,如需采用自身页面的样式 [‘*’]
onPrintDialogClose关闭浏览器打印对话框后执行的回调方法
font_size参数适用于html/json,默认12pt
  1. Print.js如何使用
import printJS from 'print-js';
const style = `@page {margin:0mm 0mm 0mm 0mm;}`; //设置打印页面的样式
printJS({printable: idName, // 标签元素idtype: 'html',header: '',targetStyles: ['*'],style: style,font_size: '',onPrintDialogClose: () => {//打印弹窗关闭后的回调方法}});
  1. 注意事项
//如需使用自身页面的样式targetStyles: ['*'],font_size: '',
//这两个参数必须同时存在

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/121795.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

抓取网页的含义和URL基本构成

抓取网页是指通过爬虫程序从互联网上获取网页的内容和数据。抓取网页是爬虫的核心功能之一&#xff0c;通过抓取网页&#xff0c;可以获取到网页中的文本、图片、链接等信息&#xff0c;用于后续的数据分析、挖掘和应用。 URL&#xff08;Uniform Resource Locator&#xff09…

muduo源码剖析之Buffer缓冲区类

简介 Buffer封装了一个可变长的buffer&#xff0c;支持廉价的前插操作&#xff0c;以及内部挪腾操作避免额外申请空间 使用vector作为缓冲区(可自动调整扩容) 设计图 源码剖析 已经编写好注释 buffer.h // Copyright 2010, Shuo Chen. All rights reserved. // http://c…

城市群(Megalopolis)/城际(inter-city)OD相关研究即Open Access数据集调研

文章目录 1 城市群/城际OD定义2 理论模型与分析方法2.1 重力模型 Gravity Model2.2 干预机会模型 Intervening Opportunities Model2.3 辐射模型 Radiation Model 3 Issues related to OD flows3.1 OD Prediction3.2 OD Forecasting3.3 OD Construction3.4 OD Estimation 4 OD …

javascirpt封装xhr上传多张图片,以及解决formdata后端只接受一张图片问题,用原型链来封装减少资源浪费和提高性能

这里使用了函数的原型链来封装每个共享函数和特权方法 访问私有数据 <html><head><meta http-equiv"Content-Type:text/html;charsetutf-8"/><title></title><script type"text/javascript" src"common.js"&g…

机器学习之IV编码,分箱WOE编码

IV的概念与作用 全称是Information Value&#xff0c;中文的意思是信息价值&#xff0c;或者信息量作用&#xff1a; 1、构建分类模型时&#xff0c;经常需要对特征进行筛选。 2、挑选特征的过程考虑的因素比较多&#xff0c;最主要和最直接的衡量标准是特征的预测能力&#…

gitlab 通过变量连接自建K8S

services:- docker:19.03.7-dind- golang:1.17.8-alpine3.15- docker:stable stages:- package- build and push docker image- deploy variables:KUBECONFIG: /etc/deploy/config build:tags:- k8simage: golang:1.17.8-alpine3.15stage: package# 只作用在main分支only:- mai…

PHP简单实现预定义钩子和自定义钩子

在PHP中&#xff0c;钩子&#xff08;Hooks&#xff09;是一种机制&#xff0c;允许开发人员在特定的时机插入自定义代码。通过使用钩子&#xff0c;开发人员可以在应用程序的特定事件发生时执行自定义的功能或逻辑 钩子有两种类型&#xff1a;预定义钩子和自定义钩子。 预定…

Ubuntu安装docker,并换镜像源详细教程,建议收藏

文章目录 添加docker官方的GPG密钥将docker仓库添加到apt源安装docker检查docker换源 添加docker官方的GPG密钥 sudo apt-get updatesudo apt-get install ca-certificates curl gnupgsudo install -m 0755 -d /etc/apt/keyringscurl -fsSL https://download.docker.com/linux…

JAVA 同城服务货运搬家小程序系统开发时应注意哪些?

在开发JAVA同城服务货运搬家小程序系统时&#xff0c;需要注意以下几点&#xff1a; 需求分析与设计&#xff1a;在开始开发前&#xff0c;需要对系统进行详细的需求分析与设计。这包括了对用户需求的理解、业务流程的梳理、数据库的设计以及界面设计等。确保系统的功能完善、…

Linux shell 从文本文件读取文件列表循环拷贝

先抛出问题&#xff0c;有一个文本文件(files.name)列出哪些文件要拷贝&#xff0c;一行一个(可以带路径) aaa.x bbb.c ccc.d folderA folderB 现在要将其拷贝到另一个目录&#xff0c;由于一个一个拷贝太麻烦&#xff0c;遂考虑使用脚本&#xff0c;网上查了stackoverflow&a…

【axios】axios的基本使用

一、 Axios简介 1、 Axios是什么&#xff1f; Axios是一个基于promise的HTTP库&#xff0c;类似于jQuery的ajax&#xff0c;用于http请求。可以应用于浏览器端和node.js&#xff0c;既可以用于客户端&#xff0c;也可以用于node.js编写的服务端。 2.、Axios特性 支持Promis…

Groovy安装开发环境

准备下载GDK并安装环境变量,跟安装JDK一模一样 https://groovy.apache.org/download.html

【Qt】窗口和对话框区别、主窗口和二级窗口区别、QMainWindow和QDialog区别

窗口和对话框&#xff08;Window and Dialog Widgets&#xff09; 未嵌入在父界面中的界面称为窗口。&#xff08;通常&#xff0c;窗口具有边框和标题栏&#xff0c;尽管也可以使用合适的窗口标志创建没有此类标志的窗口&#xff09;。 在Qt中&#xff0c;QMainWindow和QDial…

安装使用vcpkg的简易教程

目录 1. 首先安装vcpkg2. 在vcpkg目录下运行bootstrap-vcpkg.bat 命令3. 接着vs进行集成4. 使用vcpkg搜索可用的包5.下载安装所需包6.下载安装完成 1. 首先安装vcpkg 使用git命令下载 git clone https://github.com/Microsoft/vcpkg.git如果下载失败可直接下载文件 (vcpkg-ma…

基于Pytest+Requests+Allure实现接口自动化测试!

一、整体结构 框架组成&#xff1a;pytestrequestsallure设计模式&#xff1a; 关键字驱动项目结构&#xff1a; 工具层&#xff1a;api_keyword/参数层&#xff1a;params/用例层&#xff1a;case/数据驱动&#xff1a;data_driver/数据层&#xff1a;data/逻辑层&#xff1a…

C++基础:函数模板

为了代码重用&#xff0c;代码必须是通用的&#xff1b;通用的代码就必须不受数据类型的限制。那么我们可以把数据类型改为一个设计参数&#xff0c;这种类型的程序设计称为参数化程序设计&#xff0c;软件模板有模板构造&#xff0c;包括函数模板和类模板。 函数模板可以用来…

工厂智能工具介绍——5W1H

5W1H分析法是一种常见的思考工具&#xff0c;它的名称来源于它的六个基本问题&#xff1a;1. What&#xff08;什么&#xff09;&#xff1b;2. Why&#xff08;为什么&#xff09;&#xff1b;3. Who&#xff08;谁&#xff09;&#xff1b;4. Where&#xff08;在哪里&#x…

rpc汇总

1、什么是rpc rpc的应用&#xff0c;有哪些 Google 开源了 gRPC&#xff0c; Facebook 开源了 Thrift&#xff0c; Twitter 开源了 Finagle&#xff0c; 百度开源了bRPC&#xff0c; 腾讯开源了 Tars&#xff0c; 阿里开源了 Dubbo 和 HSF&#xff0c; 新浪开源了 Motan 等 gr…

设计模式(19)命令模式

一、介绍&#xff1a; 1、定义&#xff1a;命令模式&#xff08;Command Pattern&#xff09;是一种行为设计模式&#xff0c;它将请求封装为一个对象&#xff0c;从而使你可以使用不同的请求对客户端进行参数化。命令模式还支持请求的排队、记录日志、撤销操作等功能。 2、组…

在spring boot+vue项目中@CrossOrigin 配置了允许跨域但是依然报错跨域,解决跨域请求的一次残酷经历

首先&#xff0c;说一下我们的项目情况&#xff0c;我们项目中后端有一个过滤器&#xff0c;如果必须要登录的接口路径会被拦下来检查&#xff0c;前端要传一个token&#xff0c;然后后端根据这个token来判断redis中这个用户是否已经登录。 if (request.getMethod().equals(&qu…