43、vue导出pdf文件,并解决滚动条外内容无法获取的问题

使用插件html2canvas和jspdf插件

下载完两个插件后引入所需要的页面
import html2canvas from "html2canvas"
import jsPDF from "jspdf"

1、在导出之前将元素的高度或者宽度设置为滚动高度或者宽度,如:

el.style.height = el.scrollHeight + 'px';//把要导出的元素高度设置为滚动高度

2、转为图片之后再将高度/宽度设回来

//下载完成后改变浏览器界面可视区域高度
el.style.height = el.clientHeight+ 'px'

以下导出pdf方法

// 导出页面为PDF格式---使用插件html2canvas和jspdf插件
export function exportPDF(titleName, id) {document.body.scrollTop = document.documentElement.scrollTop = 0;let el = document.querySelector("#my_table_1");var clientH = el.clientHeight;el.style.height = el.scrollHeight + 'px';//把要导出的元素高度设置为滚动高度html2canvas(el, {allowTaint: true,useCORS: true,dpi: 120, // 图片清晰度问题background: "#142D42", //如果指定的div没有设置背景色会默认成黑色,这里是个坑y: 0}).then((canvas) => {var currentPage = 1;//未生成pdf的html页面高度var leftHeight = canvas.height;var a4Width = 576;var a4Height = 772.89; //A4大小,210mm x 297mm,四边各保留10mm的边距,显示区域190x277//一页pdf显示html页面生成的canvas高度;var a4HeightRef = Math.floor((canvas.width / a4Width) * a4Height);//pdf页面偏移var position = 0;var 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 index = 1,canvas1 = document.createElement("canvas"),height;pdf.setDisplayMode("fullwidth", "continuous", "FullScreen");function createImpl(canvas) {if (leftHeight > 0) {index++;var checkCount = 0;if (leftHeight > a4HeightRef) {var i = position + a4HeightRef;for (i = position + a4HeightRef; i >= position; i--) {var isWrite = true;for (var j = 0; j < canvas.width; j++) {var c = canvas.getContext("2d").getImageData(j, i, 1, 1).data;if (c[0] != 0xff || c[1] != 0xff || c[2] != 0xff) {isWrite = false;break;}}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.width;canvas1.height = height;var ctx = canvas1.getContext("2d");ctx.drawImage(canvas,0,position,canvas.width,height,0,0,canvas.width,height);var pageHeight = Math.round((a4Width / 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 -= height;position += height;if (leftHeight > 0) {setTimeout(createImpl, 500, canvas);} else {pdf.save(titleName + ".pdf");//下载完成后改变浏览器界面可视区域高度el.style.height = clientH + 'px'}}}let targetPage = pdf.internal.getNumberOfPages();//当内容未超过pdf一页显示的范围,无需分页if (leftHeight < a4HeightRef) {pdf.addImage(pageData,"JPEG",10,40,a4Width,(a4Width / canvas.width) * leftHeight);pdf.save(titleName + ".pdf");//下载完成后改变浏览器界面可视区域高度el.style.height = clientH + 'px'} else {try {pdf.deletePage(0);setTimeout(createImpl, 500, canvas);} catch (err) {}}})
}

vue页面使用

//导出pdf------ 数据统计汇总为导出文件名称;my_table_1为要导出的dom元素idexportData(){exportPDF("数据统计汇总",'my_table_1');},

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

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

相关文章

【MySQL】CONCAT、CONCAT_WS、GROUP_CONCAT 函数用法

CONCAT 含义 将多个字符串连接成一个字符串 语法 CONCAT(str1, str2,...)数据模拟&#xff08;user_score&#xff09; idnamescore1小明652小红703小兰904(Null)1005小李(Null) SQL 代码 SELECT CONCAT(name, ,, score) AS score FROM user_score结果 score小明,65小红…

31、Flink的SQL Gateway介绍及示例

Flink 系列文章 1、Flink 部署、概念介绍、source、transformation、sink使用示例、四大基石介绍和示例等系列综合文章链接 13、Flink 的table api与sql的基本概念、通用api介绍及入门示例 14、Flink 的table api与sql之数据类型: 内置数据类型以及它们的属性 15、Flink 的ta…

梳理一名Go后端程序员日常用的软件~

大家好&#xff0c;我是豆小匠。 这期分享下我日常工作用到的软件和工具&#xff01; 省流版图片↓↓↓ 工具分为四类&#xff1a;编码软件、笔记/文档软件、开发工具和日常软件等。 1. 编码软件 1.1. Goland 出自JetBrain家族&#xff0c;IDE的王者&#xff0c;作为我的…

hash模式和history模式

在Vue Router中&#xff0c;有两种路由模式可供选择&#xff1a;hash模式和history模式。它们各自有一些优点和缺点&#xff0c;下面是它们的简要介绍&#xff1a; hash模式的原理是通过hashchange事件&#xff0c;通过监听hash变化来驱动界面变化。它的url中有 # 号 1、监听…

Vuetify:定制化、响应式的 Vue UI 库 | 开源日报 No.83

vuetifyjs/vuetify Stars: 38.1k License: MIT Vuetify 是一个无需设计技能的 UI 库&#xff0c;具有精美手工制作的 Vue 组件。它具有以下核心优势和主要功能&#xff1a; 可定制性&#xff1a;使用 SASS/SCSS 进行广泛自定义&#xff0c;并提供默认配置和蓝图。响应式布局&…

C++标准模板(STL)- 类型支持 (类型修改,从给定类型移除 const 或/与 volatile 限定符,std::remove_cv)

类型特性 类型特性定义一个编译时基于模板的结构&#xff0c;以查询或修改类型的属性。 试图特化定义于 <type_traits> 头文件的模板导致未定义行为&#xff0c;除了 std::common_type 可依照其所描述特化。 定义于<type_traits>头文件的模板可以用不完整类型实例…

debian10 开启rdp安装firefox并解决firefox 中文乱码

debian10 开启rdp安装firefox apt -y install tigervnc-standalone-server apt -y install xrdp tigervnc-standalone-server systemctl enable xrdp --nowapt install firefox-esrmstsc连接 firefox-settings-general-fonts-advanced-Simplified Chinese

如何看待Unity新收费模式?

Unity新收费模式的变化主要在于将收费重心从功能分级收费转变为资源使用量收费&#xff0c;这个改变已经引起了一定的争议和反响。以下是我个人的看法&#xff1a; 优点&#xff1a; 更公平的收费方式&#xff1a;新的收费模式将更加公平&#xff0c;用户只需按照实际使用的数…

汇编-PUSHFD和POPFD标志寄存器值压栈和出栈

PUSHFD指令将32位EFLAGS寄存器内容压入堆栈&#xff0c; 而POPFD指令则将栈顶单元内容弹出到EFLAGS寄存器 格式&#xff1a;

接口自动化测试:pytest基础讲解

为什么要做接⼝测试&#xff1f; 只靠前端测试很难确保很⾼的覆盖率。接⼝测试&#xff0c;可以模拟出各种类型的⼊参&#xff0c;包括⼀些在前端模拟不出来的⼊参&#xff0c;还能根据接⼝⽂档的定义&#xff0c;设计出相对完善的⼊参值&#xff0c;在接⼝层保证质量&#xf…

常见树种(贵州省):006栎类

摘要&#xff1a;本专栏树种介绍图片来源于PPBC中国植物图像库&#xff08;下附网址&#xff09;&#xff0c;本文整理仅做交流学习使用&#xff0c;同时便于查找&#xff0c;如有侵权请联系删除。 图片网址&#xff1a;PPBC中国植物图像库——最大的植物分类图片库 一、麻栎 …

基础课10——自然语言生成

自然语言生成是让计算机自动或半自动地生成自然语言的文本。这个领域涉及到自然语言处理、语言学、计算机科学等多个领域的知识。 1.简介 自然语言生成系统可以分为基于规则的方法和基于统计的方法两大类。基于规则的方法主要依靠专家知识库和语言学规则来生成文本&#xff0…

博客摘录「 【Linux】线程池」2023年10月14日

一种线程使用模式。线程过多会带来调度开销&#xff0c;进而影响缓存局部性和整体性能。而线程池维护着多个线程&#xff0c;等待着 监督管理者分配可并发执行的任务。这避免了在处理短时间任务时创建与销毁线程的代价。线程池不仅能够保证内核的充分利 用&#xff0c;还能防止…

Vue公共loading升级版(处理并发异步差时响应)

公共loading是项目系统中很常见的场景&#xff0c;处理方式也不外乎三个步骤&#xff1a; 通过全局状态管理定义状态值&#xff08;vuex、pinia等&#xff09;。 在程序主入口监听状态值变化&#xff0c;从而展示/隐藏laoding动画。 在请求和相应拦截器中变更状态值。 第一二…

svn文件不显示红色感叹号

如下图所示&#xff0c;受svn版本控制的文件不显示下图中红色感叹号和绿色对号时&#xff0c; 可以试着如下操作 空白处单击右键&#xff0c;具体操作如下图

Rust可空类型Option

文章目录 Option基础模式匹配unwrap Rust基础教程&#xff1a;初步⚙所有权⚙结构体和枚举类⚙函数进阶⚙泛型和特征⚙并发和线程通信⚙cargo包管理 Rust进阶教程&#xff1a;用宏实现参数可变的函数⚙类函数宏 Option基础 在一些编程语言中&#xff0c;允许存在空值&#xf…

docker的基本使用以及使用Docker 运行D435i

1.一些基本的指令 1.1 容器 要查看正在运行的容器&#xff1a; sudo docker ps 查看所有的容器&#xff08;包括停止状态的容器&#xff09; sudo docker ps -a 重新命名容器 sudo docker rename <old_name> <new_name> <old_name> 替换为你的容器名称…

用 HLS 实现 UART

用 HLS 实现 UART 介绍 UART 是一种旧的串行通信机制&#xff0c;但仍在很多平台中使用。它在 HDL 语言中的实现并不棘手&#xff0c;可以被视为本科生的作业。在这里&#xff0c;我将通过这个例子来展示在 HLS 中实现它是多么容易和有趣。 因此&#xff0c;从概念上讲&#xf…

内存池的面试整理

文章思路来源 如何实现无锁申请&#xff1f; 每个线程申请自己的TreadCacheTLS对象&#xff0c;来管理自己的freeList数组。小内存的大小&#xff1f; 0-256K&#xff0c;并且对申请到的内存进行字节对齐&#xff0c;保证申请到的内存可以映射到对应的freeList中。映射规则&am…

Linux命令(129)之dstat

linux命令之dstat 1.dstat介绍 linux命令dstat是用来实时显示系统中各个进程的资源占用情况 2.dstat用法 dstat [参数] dstat参数 参数说明-c显示CPU的相关信息-d显示磁盘的相关信息-g显示page相关的统计数据-m显示内存的相关统计数据-n显示网络的相关统计数据-p显示进程的…