当前位置: 首页 > news >正文

前端导出页面PDF

import html2canvas from 'html2canvas'
import { jsPDF } from 'jspdf'
import { Loading } from 'element-ui'
let downloadLoadingInstance// 导出页面为PDF格式---使用插件html2canvas和jspdf插件
export function exportPDF(fileName, node) {downloadLoadingInstance = Loading.service({ text: 'データをダウンロード中です。しばらくお待ちください', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' })document.body.scrollTop = document.documentElement.scrollTop = 0var clientH = node.clientHeightnode.style.height = node.scrollHeight + 'px'// 把要导出的元素高度设置为滚动高度html2canvas(node, {allowTaint: true,useCORS: true,backgroundColor: '#142D42', // 如果指定的div没有设置背景色会默认成黑色,这里是个坑y: 0,ignoreElements: element => {if (element.tagName === 'BUTTON' ||typeof element.className !== 'string' ||(typeof element.className === 'string' && element.className.includes('sidebar-container')) ||(typeof element.className === 'string' && element.className.includes('navbar')) ||(typeof element.className === 'string' && element.className.includes('tags-view-container')) ||(typeof element.className === 'string' && element.className.includes('operation-bar')) ||element.tagName === 'svg') {return true}return false}}).then((canvas) => {// 未生成pdf的html页面高度var leftHeight = canvas.heightvar a4Width = 576var a4Height = 772.89 // A4大小,210mm x 297mm,四边各保留10mm的边距,显示区域190x277// 一页pdf显示html页面生成的canvas高度;var a4HeightRef = Math.floor((canvas.width / a4Width) * a4Height)// pdf页面偏移var position = 0var pageData = canvas.toDataURL('image/jpeg', 1.0)var pdf = new jsPDF('p', 'pt', 'a4') // A4纸,纵向// pdf.addFont('simkai-normal.ttf', 'simkai', 'normal')// pdf.setFont('simkai')// pdf.setFontSize(20)var canvas1 = document.createElement('canvas')var heightpdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen')function createImpl(canvas) {if (leftHeight > 0) {var checkCount = 0if (leftHeight > a4HeightRef) {var i = position + a4HeightReffor (i = position + a4HeightRef; i >= position; i--) {var isWrite = truefor (var j = 0; j < canvas.width; j++) {var c = canvas.getContext('2d').getImageData(j, i, 1, 1).dataif (c[0] !== 0xff || c[1] !== 0xff || c[2] !== 0xff) {isWrite = falsebreak}}if (isWrite) {checkCount++if (checkCount >= 10) {break}} else {checkCount = 0}}height = Math.round(i - position) || Math.min(leftHeight, a4HeightRef)if (height <= 0) {height = a4HeightRef}} else {height = leftHeight}canvas1.width = canvas.widthcanvas1.height = heightvar ctx = canvas1.getContext('2d')ctx.drawImage(canvas,0,position,canvas.width,height,0,0,canvas.width,height)if (position !== 0) {pdf.addPage()}pdf.addImage(canvas1.toDataURL('image/jpeg', 1.0),'JPEG',10,40,a4Width,(a4Width / canvas1.width) * height)leftHeight -= heightposition += heightif (leftHeight > 0) {setTimeout(createImpl, 500, canvas)} else {pdf.save(fileName + '.pdf')// 下载完成后改变浏览器界面可视区域高度node.style.height = clientH + 'px'}}node.style.height = 'initial'downloadLoadingInstance.close()}// 当内容未超过pdf一页显示的范围,无需分页if (leftHeight < a4HeightRef) {pdf.addImage(pageData,'JPEG',10,40,a4Width,(a4Width / canvas.width) * leftHeight)pdf.save(fileName + '.pdf')// 下载完成后改变浏览器界面可视区域高度node.style.height = clientH + 'px'} else {try {pdf.deletePage(0)setTimeout(createImpl, 500, canvas)} catch (err) {console.log('err', err)}}node.style.height = 'initial'downloadLoadingInstance.close()})
}

使用的时候直接引入

import { exportPDF } from './exportPDF'

exportPdf() {if (this.drChange) {exportPDF(`[${this.wakuGroup.grpWkMei}]_[${this.nen}年${this.textSeason}]${this.$moment().format('YYYYMMDDHHmmss')}`, this.$refs.collapse.$el)} else {exportPDF(`[${this.wakuGroup.grpWkMei}]_[${this.nen}年${this.textSeason}]_${this.$moment().format('YYYYMMDDHHmmss')}`, this.$refs.collapse.$el)}},

相关文章:

前端导出页面PDF

import html2canvas from html2canvas import { jsPDF } from jspdf import { Loading } from element-ui let downloadLoadingInstance// 导出页面为PDF格式---使用插件html2canvas和jspdf插件 export function exportPDF(fileName, node) {downloadLoadingInstance Loading.…...

Jenkins的安装

1.简介 官网&#xff1a;https://www.jenkins.io 中文文档&#xff1a;Jenkins Jenkins 是一个开源的持续集成&#xff08;CI&#xff09;工具&#xff0c;用于自动化构建、测试和部署软件项目。它提供了一个易于使用和可扩展的平台&#xff0c;帮助团队更高效地开发和交付软…...

初学51单片机之I2C总线与E2PROM

首先先推荐B站的I2C相关的视频I2C入门第一节-I2C的基本工作原理_哔哩哔哩_bilibili 看完视频估计就大概知道怎么操作I2C了&#xff0c;他的LCD1602讲的也很不错&#xff0c;把数据建立tsp和数据保持thd&#xff0c;比喻成拍照时候的摆pose和按快门两个过程&#xff0c;感觉还是…...

C语言数组探秘:数据操控的艺术【下】

承接上篇&#xff0c;我们继续讲数组的内容。 八.二维数组的使用 当我们掌握了二维数组的创建和初始化&#xff0c;那我们怎么使用二维数组呢&#xff1f;其实二维数组访问也是使用下标的形式的&#xff0c;二维数组是有行和列的&#xff0c;只要锁定了行和列就能唯一锁定数组中…...

Jmeter关联,断言,参数化

目录 一、关联 边界提取器 JSON提取器 正则表达式提取器 跨线程关联 二、断言 响应断言 JSON断言 断言持续时间 三、参数化 用户参数 csv data setconfig csvread函数 一、关联 常用的关联有三种 1.边界提取器 2.JSON提取器 3.正则表达式提取器 接下来就详细讲述…...

嵌入式单片机底层原理详解

前言 此笔记面向有C语言基础、学习过数字电路、对单片机有一定了解且尚在学习阶段的群体编写,笔记中会介绍单片机的结构、工作原理,以及一些C语言编程技巧,对于还停留在复制模板、copy代码阶段的读者会有比较大的帮助,待学习完成后可以独立完成几乎所有单片机的驱动开发。 …...

重修设计模式-行为型-责任链模式

重修设计模式-行为型-责任链模式 将请求的发送和接收解耦&#xff0c;让多个接收对象都有机会处理这个请求。将这些接收对象串成一条链&#xff0c;并沿着这条链传递这个请求&#xff0c;直到链上的某个接收对象能够处理它为止。 责任链模式&#xff08;Chain of Responsibilit…...

Vercel部署/前端部署

Vercel 部署 今天要讲的是如何对别人向自己的开源仓库提的PR进行自动代码审核 1. 注册并登录Vercel 访问 Vercel官网点击右上角的"Sign Up"选择使用GitHub、GitLab、Bitbucket或邮箱注册完成注册流程并登录 2. 连接代码仓库 在Vercel仪表板,点击"New Proje…...

常见的css预处理器

CSS预处理器是一种扩展了CSS功能的脚本语言&#xff0c;它允许开发者以编程的方式编写更加干净、结构化的CSS代码。通过引入变量、嵌套规则、混合&#xff08;Mixins&#xff09;、函数等高级特性&#xff0c;CSS预处理器使得CSS代码的编写更加灵活、高效&#xff0c;同时也提高…...

mysql—半同步模式

mysql的并行复制 在172.25.254.20(slave)主机上 默认情况下slave中使用的是sql单线程回放 在master中时多用户读写&#xff0c;如果使用sql单线程回放那么会造成组从延迟严重 开启MySQL的多线程回放可以解决上述问题 mysql> show processlist; 在配置文件中进行编辑 [root…...

You are not allowed to push code to this project

原因1 用户权限不够。 具体查看用户权限路径&#xff1a; 原因2 vscode之前都能提交代码&#xff0c;但是突然就提交不上了。 表现为:前端代码能拉取&#xff0c;但是不能提交。使用idea进行前端代码的提交&#xff0c;完全没问题。 解决方案&#xff1a;修改TortoiseG…...

Java刷题:最小k个数

目录 题目描述&#xff1a; 思路&#xff1a; 具体实现 整体建立一个大小为N的小根堆 通过大根堆实现 完整代码 力扣链接&#xff1a;面试题 17.14. 最小K个数 - 力扣&#xff08;LeetCode&#xff09; 题目描述&#xff1a; 设计一个算法&#xff0c;找出数组中最小的…...

Redis实战--Redis应用过程中出现的热门问题及其解决方案

Redis作为一种高性能的key-value数据库&#xff0c;广泛应用于缓存、消息队列、排行榜等场景。然而&#xff0c;在实际应用中&#xff0c;随着业务规模的不断扩大和访问量的持续增长&#xff0c;缓存系统也面临着诸多挑战&#xff0c;其中最为典型的便是缓存穿透、缓存击穿和缓…...

实时数字人DH_live使用案例

参看: https://github.com/kleinlee/DH_live ubuntu 测试 apt install ffmpeg 下载安装: git clone https://github.com/kleinlee/DH_live.git cd DH_liveconda create -n dh_live python=3.12 conda activate dh_live pip install -r requirements.txt pip install torch -…...

线上环境排故思路与方法GC优化策略

前言 这是针对于我之前[博客]的一次整理&#xff0c;因为公司需要一些技术文档的定期整理与分享&#xff0c;我就整理了一下。(https://blog.csdn.net/TT_4419/article/details/141997617?spm1001.2014.3001.5501) 其实&#xff0c;nginx配置 服务故障转移与自动恢复也是可以…...

硬件设计很简单?合宙低功耗4G模组Air780E—开机启动及外围电路设计

Air780E是合宙低功耗4G-Cat.1模组经典型号之一&#xff0c;上期我们解答了大家关心的系列问题&#xff0c;并讲解了选型的注意要点。 有朋友问&#xff1a;能不能讲些硬件设计相关的内容&#xff1f; 模组的上电开机&#xff0c;是硬件设计调试的第一步。 本期特别分享——Ai…...

初试AngularJS前端框架

文章目录 一、框架概述二、实例演示&#xff08;一&#xff09;创建网页&#xff08;二&#xff09;编写代码&#xff08;三&#xff09;浏览网页&#xff08;四&#xff09;运行结果 三、实战小结 一、框架概述 AngularJS 是一个由 Google 维护的开源前端 JavaScript 框架&am…...

【学习笔记】手写 Tomcat 六

目录 一、线程池 1. 构建线程池的类 2. 创建任务 3. 执行任务 测试 二、URL编码 解决方案 测试 三、如何接收客户端发送的全部信息 解决方案 测试 四、作业 1. 了解工厂模式 2. 了解反射技术 一、线程池 昨天使用了数据库连接池&#xff0c;我们了解了连接池的优…...

打靶记录18——narak

靶机: https://download.vulnhub.com/ha/narak.ova 推荐使用 VM Ware 打开靶机 难度&#xff1a;中 目标&#xff1a;取得 root 权限 2 Flag 攻击方法&#xff1a; 主机发现端口扫描信息收集密码字典定制爆破密码Webdav 漏洞PUT 方法上传BF 语言解码MOTD 注入CVE-2021-3…...

LabVIEW编程能力如何能突飞猛进

要想让LabVIEW编程能力实现突飞猛进&#xff0c;需要采取系统化的学习方法&#xff0c;并结合实际项目进行不断的实践。以下是一些提高LabVIEW编程能力的关键策略&#xff1a; 1. 扎实掌握基础 LabVIEW的编程本质与其他编程语言不同&#xff0c;它是基于图形化的编程方式&…...

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

接口自动化测试:HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

Proxmox Mail Gateway安装指南:从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...