vue实现打印多页

vue3实现区域打印功能(vue3-print-nb) 前端使用vue3-print-nb插件来区域打印,实现指哪打哪! 阅读详情

1.安装打印插件vue-print-nb

安装 npm install vue-print-nb --save

在main.js文件中注册
import Print from 'vue-print-nb'
Vue.use(Print);

2.页面使用

<div id="print">
<div class="page_items" style="width:100%;min-height:1020px;page-break-after: always;">
页面一
<page1 ></page1>
</div>
<div class="page_items" style="width:100%;min-height:1020px;">页面二...</div>
<div class="page_items" style="width:100%;min-height:1020px;">页面三...</div>
<div class="page_items" style="width:100%;min-height:1020px;">页面四...</div>
</div>
<button v-print="'#print'">点击打印</button>

<script>
import page1 from './print/page1.vue';
export default {
components: {
page1
}
}
</script>

页面内容过多自动换页(个人理解是某个页面内容过多,让其换到下一张打印,而不影响后面的内容整张打印)

// 在style中加入page-break-after: always;
<div class="page_items" style="width:100%;min-height:1020px;page-break-after: always;">页面一</div>
vue实现页面打印自动分页的两个方法 一、通过ref方式获取元素进行打印 1.封装一个js文件 // 打印类属性、方法定义 /* eslint-disable */ const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ 'noPrint': '.no-print' }, options); if ((typeof 阅读详情

相关推荐

vue中使用vue-print.js实现多页打印

主要介绍了vue中使用vue-print.js实现多页打印,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

vue实现打印功能(可多页打印)

当我们使用插件时,发现只能打印一张,很难受,现在封装了一个可以多页打印的工具类,简单方便,话不多说,直接上代码。

weixin_52473844的博客 2897

从Reset到Read:深入解析Rolling Shutter曝光流水线

本文深入解析Rolling Shutter(卷帘曝光)的工作原理,重点探讨Reset和Read信号在图像传感器中的关键作用。通过Reset-Read流水线机制,详细解释了曝光控制、时序调优及运动伪影补偿等核心技术,帮助读者理解卷帘曝光在高速摄影和动态场景中的应用。

weixin_42531925的博客 254

打印并实现分页

print.js // 打印类属性、方法定义 /* eslint-disable */ const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ 'noPrint': '.no-print' }, options); if ((typeof dom) ===

qq_42882723的博客 916

从零搭建SPI通信系统:AXI Quad SPI IP核在Xilinx平台上的完整配置流程

本文详细介绍了在Xilinx平台上使用AXI Quad SPI IP核从零搭建SPI通信系统的完整配置流程。涵盖IP核架构解析、Vivado环境配置、寄存器编程实战及性能优化策略,帮助开发者快速实现高速稳定的SPI通信,特别适用于嵌入式系统开发中的外围设备连接需求。

hh234的博客 1053

逆向工程的艺术:如何绕过PDD的长连接机制实现高效抓包

本文深入解析了如何通过逆向工程技术绕过拼多多(PDD)的长连接机制实现高效抓包。详细介绍了动态调试方案、关键函数Hook技巧及流量解密重组方法,帮助开发者在非Root环境下捕获并解析PDD的加密数据。结合Python工具链,实现稳定数据采集,适用于电商数据分析和反爬策略研究。

weixin_29058331的博客 674

Vue实现多页打印( print.js)

Vue实现多页打印( print.js)

sunshineTing2的博客 6035

PowerBI参数化实战:3分钟搞定动态数据源切换(附常见错误排查)

本文详细介绍了PowerBI参数化实战技巧,教你3分钟实现动态数据源切换。通过创建参数、改造查询和测试切换三步,轻松应对多环境部署与团队协作中的路径问题,并附上常见错误排查指南,有效提升报表的可维护性和工作效率。

p1q2r的博客 585

vue-pdf 高级技巧:如何实现多页显示与批量打印功能

vue-pdf 是一款专为 Vue.js 开发者打造的 PDF 查看器组件,它基于 pdf.js 构建,提供了轻量级且高效的 PDF 文档渲染能力。本文将分享两个实用的高级技巧,帮助你轻松实现多页 PDF 文档的优雅展示以及便捷的批量打印功能,让你的 Vue 项目 PDF 处理体验更上一层楼。 ## 一、多页 PDF 文档的高效渲染方案 📄 处理多页 PDF 是开发中常见的需求,vue-pd

gitblog_00156的博客 1140

别再手动填序号了!用Python脚本在Arcgis属性表里实现分组自动编号(附完整代码)

本文详细介绍了如何利用Python脚本在Arcgis属性表中实现分组自动编号,告别低效的手工操作。通过核心代码解析和实战教程,帮助GIS工程师快速掌握自动化编号技术,提升工作效率并降低错误率。特别适合城市规划、国土调查等需要处理大量分组数据的场景。

weixin_42532473的博客 309

DeepSeek+知网研学:三步搞定文献矩阵与对比分析(实战指南)

本文提供了一套高效实用的文献管理分析实战指南,详细介绍了如何结合DeepSeek大模型与知网研学平台,通过三个核心步骤快速完成文献梳理。该方法能自动提炼文献核心要素、生成结构化对比矩阵,并辅助发现研究空白,显著提升学术研究者的文献分析效率与深度。

weixin_29061509的博客 491

vue实现打印功能,并多页打印

一、下载 // 打印类属性、方法定义 /* eslint-disable */ const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ 'noPrint': '.no-print' }, options); if ((typeof dom

m0_60067716的博客 1812

单片机毕业设计-基于STM32单片机的智能镜系统-仿真设计

可通过MQ-2监测当前烟雾浓度可通过温湿度传感器监测当前温湿度可通过光照强度传感器监测光照强度可通过蜂鸣器进行烟雾报警可通过语音识别模块进行反馈播报状态可通过按键设置阈值三个继电器控制灯、加湿、风扇标签:STM32单片机、OLED112864、DHT11、BH1750、继电器、SU-03T、MQ-2、蜂鸣器题目扩展:智能家居安防、智能大棚控制系统、智能环境检测系统项目编号:ZL-32-240604-FZ。

bsdog11的博客 967

vue项目中如何利用lodop控件实现多页打印

针对windows环境下的vue项目中如何利用lodop控件实现打印的功能,不支持mac环境 下载安装 首先去lodop官网下载中心下载相关的包,完成安装 重点关注前四个文件,安装第一个文件,在第二个文件和第三个文件中根据电脑系统选一个安装。将第四个文件放在项目的assets文件夹下面。 代码中使用 由于不好控制分页的时候,切纸的位置,于是换了一种方式,代码控制每一页的内容的地方使用LODOP.NewPageA();实现手动分页,这种方式可以保证切纸位置不会跑偏。 //首先引入相关的js import

hmmmmm的博客 3219

华为FusionCompute之计算虚拟化

华为FusionCompute之虚拟化

jks212454的博客 2452

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

vue + el-table +Print.js 实现前端打印分页多页表格

发大水阿斯顿发说法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 引入样式 -->

qq_40247562的博客 6612

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

vue使用vue-print 多页打印带表头

vue使用vue-print 多页打印带表头

weixin_51698741的博客 1489

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

在vue3里面设置一个打印按钮,点击打印直接跳到打印页面,PDF可以生成多页

【代码】在vue3里面设置一个打印按钮,点击打印直接跳到打印页面,PDF可以生成多页。

weixin_49005706的博客 551

vue使用 print-js打印多页

vue使用 print-js打印预览,打印多页。

... 1734

vue 使用浏览器自带打印机打印功能

本文主要介绍了vue项目中使用print.js打印,解决多页,分页,打印预览样式修改等问题。 引入安装vue-print.js cnpm i vue-printjs --save-dev 解决打印多页只出现一页问题 由于打印插件存在问题,如果打印文件超出一页,只显示一页,所以我们需要修改print.js源文件,所以只能手动下载vue-print.js到本地,做一些修改,然后引入到项目中,不能使用npm安装 下载 print.js https://github.com/zxc19890923/print/b

暖一杯茶的博客 3677

html表格分页打印样式,vue部分打印(多页自动分页、打印样式自定义、多页打印表格页面顶部带表头)...

写在前面:注意打印表格时,若需要多页打印,则尽量使用原生table元素实现,这样在分页时每页顶部会带有表头,用户体验比较好一、引用插件(在 main.js 中全局引入!!注意,需要修改源码,所以尽量下载依赖到本地)import './style/print.scss'import Print from '@/libs/print.js'Vue.use(Print);在js依赖里面找到这个方法,添加...

weixin_29968283的博客 1550

后端返回PDF文件流,前端处理展示及打印(补:PDF多页不显示问题)

后端返回PDF文件流,前端处理展示及打印,处理pdf多页不展示问题

zsz_1309297338的博客 6466

Vue实现数据表格的打印、导入、导出

数据表格打印、导入、导出数据表格打印一、实现当前页面数据打印二、实现全部页面数据打印数据表格导入一、HTML代码编写二、JavaScript代码编写三、导入数据表格JS代码编写数据表格导出一、安装相应插件二、导入依赖文件三、修改JS文件四、代码编写使用 数据表格打印 一、实现当前页面数据打印 利用 vue-print-nb 插件 1.安装 npm install vue-print-nb --save 2.引入 // 在main.js文件中引入 import Print from 'vue-p

ProChick's Blog 4656

Vue使用print.js连续打印多页A4表单---修正版

父组件 <el-dialog :visible.sync="printDialog" class="printDialog"> <div ref="print"> <section class="print-page page-a4"> <acceptance-form :reg-id="printTabl...

qq_39691676的博客 8878

window.print()实现局部打印及遇到的问题

window.print()实现局部打印

weixin_45546982的博客 2396

vue+element打印

vue项目中,HTML页面打印功能.在项目中,有时需要打印页面的表格, 在网上找了一个打印组件vue-print-nb 本博客源码:https://github.com/shengbid/vue-print,这里面只放了打印组件的代码,只需要这个功能的下载这个 https://github.com/shengbid/vue-demo 这个项目里平时博客写的一些功能的代码都放在里面,有需要可以下载看看,有帮助的话点个star哈 使用方式 安装 npm install vue-print-n...

Tom_sensen的博客 2267
上一篇: vue使用watch监听json对象中某个键值发生改变触发事件
下一篇: vue keep-alive实现不缓存某些页面和只缓存某些页面
if时光重来
博客等级 码龄8年 248粉丝 217原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值