vue使用pdf 导出当前页面,(jspdf, html2canvas )

需要安装两个插件

npm install `html2canvas` jspdf
yarn add html2canvas jspdf
<div class="app-container" id="pdfPage"><!--这个放你需要导出的内容-->
</div><el-button size="mini" @click="onExportPdf">导出数据</el-button>
onexportPDF() {html2canvas(document.querySelector("#pdfPage"), {scale: 2, // 设置画布缩放比例allowTaint: true, // 允许加载跨域图片useCORS: true, // 使用跨域资源共享加载图片// scaleFonts: true, // 缩放字体}).then((canvas) => {var pdf = new jsPDF('p', 'mm', 'a4') // A4纸,纵向var ctx = canvas.getContext('2d')var a4w = 180;var a4h = 280 // A4大小,210mm x 297mm,四边各保留20mm的边距,显示区域170x257var imgHeight = Math.floor(a4h * canvas.width / a4w) // 按A4显示比例换算一页图像的像素高度var renderedHeight = 0while (renderedHeight < canvas.height) {var page = document.createElement('canvas')page.width = canvas.widthpage.height = Math.min(imgHeight, canvas.height - renderedHeight) // 可能内容不足一页// 用getImageData剪裁指定区域,并画到前面创建的canvas对象中page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0)pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width)) // 添加图像到页面,保留10mm边距renderedHeight += imgHeightif (renderedHeight < canvas.height) {pdf.addPage()} // 如果后面还有内容,添加一个空页}pdf.save('能力模型图' + ".pdf");}

下个的图片是 导出成功的例子 大家可以试一下 亲测有效
在这里插入图片描述

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

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

相关文章

记录一次线下渗透电气照明系统(分析与实战)

项目地址:https://github.com/MartinxMax/S-Clustr 注意 本次行动未造成任何设备损坏,并在道德允许范围内测试 >ethical hacking< 发现过程 在路途中,发现一个未锁的配电柜,身为一个电工自然免不了好奇心(非专业人士请勿模仿,操作不当的话220V人就直了) 根据照片,简…

springBoot--web--http缓存机制测试

springBoot--web--http缓存机制测试 前言1、多端内容适配基于请求头内容协商&#xff08;默认开启&#xff09;基于请求参数内容协商&#xff08;需要开启&#xff09; 2、默认返回json数据3、设置返回xml数据导入jackson-dataformat-xml包在类文件中添加注解 JacksonXmlRootEl…

MYSQL 根据唯一索引键更新死锁问题

mysql 死锁问题及死锁权重分析 问题发生过程&#xff1a;1、生产发现死锁一次 语句为sql1:UPDATE table set data ‘123’ where business_no ABC; 该行数据的id1&#xff0c; business_no ABC tablbe 字段 id&#xff1a;主键 business_no为唯一索引字段&#xff0c;其…

设计模式截图记录

设计模式截图记录

设置Oracle环境变量

打开系统变量 1.ORACLE_HOME&#xff1a; 新建一个变量home&#xff0c;再在path中添加&#xff1a;%ORACLE_HOME%\BIN 变量名&#xff1a; ORACLE_HOME 变量值&#xff1a; D:\app\chenzhi\product\11.2.0\dbhome_2&#xff08;自己的存放地址&#xff09; 2.NLS_LANG&am…

普通二维码跳转微信小程序实战

简介 服务端springboot项目,前端基于uniapp的微信小程序,要求扫描二维码之后进入到小程序指定页面,下面记录一下实现过程以及过程中遇到的问题. 实现过程 下面是成功跳转的配置截图: 首先说下二维码规则,这个地方需要填写扫描二维码之后打开的地址,这个地址在我的项目里…

idea热加载,JRebel 插件是目前最好用的热加载插件,它支持 IDEA Ultimate 旗舰版、Community 社区版

1.如何安装 ① 点击 https://plugins.jetbrains.com/plugin/4441-jrebel-and-xrebel/versions 地址&#xff0c;下载 2022.4.1 版本。如下图所示&#xff1a; ② 打开 [Preference -> Plugins] 菜单&#xff0c;点击「Install Plugin from Disk…」按钮&#xff0c;选择刚下…

腾讯云创建了jenkins容器,但无法访问

1、首先&#xff0c;查看本机能不能ping通你的腾讯云服务器 如果ping的通那就下一步 2、查看腾讯云服务器的防火墙关了没&#xff0c;没关关掉、 firewall-cmd --state not running 3、那就在云服务器的控制台开放端口

npx是什么命令?npx和npm有什么区别?

平时安装node模块的时候&#xff0c;经常使用的命令是npm。其实还有另外一个命令&#xff0c;叫做npx。网上的说法都是&#xff1a;npx是npm命令的升级版本&#xff0c;功能非常强大。 npx 是什么 npx是一个由Node.js官方提供的用于快速执行npm包中的可执行文件的工具。它可以…

【安全体系架构】——SIEM架构

什么是SIEM架构&#xff1f; 安全信息与事件管理&#xff08;SIEM&#xff09;架构是一种综合性的安全管理系统&#xff0c;旨在监控、检测、报告和应对安全事件和威胁。SIEM系统集成了多个安全功能&#xff0c;包括日志收集、事件管理、威胁检测和响应&#xff0c;以提供组织…

Maven在开发中的使用及理解

在JAVA项目中&#xff0c;我们通常需要对项目的构建和依赖进行管理&#xff0c;这个时候我们就需要MAVEN来对项目进行支持。 一.MAVEN构建 在整个MAVEN构建的过程中包含以下环节&#xff0c;也对应IDEA中MAVEN的对应功能。 清理Maven Clean 清理&#xff0c;则代表删除上一…

Linux:程序地址空间/虚拟地址等相关概念理解

文章目录 程序地址空间虚拟地址和物理地址地址的转换地址空间是什么&#xff1f; 程序地址空间 在C和C程序中&#xff0c;一直有一个观点是&#xff0c;程序中的各个变量等都会有一定的地址空间&#xff0c;因此才会有诸如取地址&#xff0c;通过地址访问等操作&#xff0c;那…

【vue】在vue.config.js文件中导入模块

由于 vue.config.js 是在构建项目时由 Webpack 读取的 Node.js 脚本文件&#xff0c; 而 Node.js 的import 语法只在 ES 模块中有效&#xff0c; 所以在 vue.config.js 中不能直接使用 import 来导入模块&#xff0c; 可以使用 CommonJS 的 require 来导入模块&#xff0c;如下…

CMake语法结构说明

文章目录 一. 组织1. 目录2. 脚本3. 模块 二. 语法1. 编码2. 源文件3. 命令调用4. 命令参数&#xff08;1&#xff09;括号参数&#xff08;2&#xff09;带引号的参数&#xff08;3&#xff09;未引用的参数 5. 转义序列6. 变量引用7. 注释&#xff08;1&#xff09;括号注释&…

线性代数-Python-02:矩阵的基本运算 - 手写Matrix及numpy中的用法

文章目录 一、代码仓库二、矩阵的基本运算2.1 矩阵的加法2.2 矩阵的数量乘法2.3 矩阵和向量的乘法2.4 矩阵和矩阵的乘法2.5 矩阵的转置 三、手写Matrix代码Matrix.pymain_matrix.pymain_numpy_matrix.py 一、代码仓库 https://github.com/Chufeng-Jiang/Python-Linear-Algebra-…

Golang笔记

01 = 和 := 的区别? 前者是赋值变量,后者是定义变量 02 指针的作用 指针指向变量的地址,在64位机器上占8个字节 【1 字节(Byte)= 8 位(bit) 1 千字节(KB,Kilobyte)= 1,024 字节(2^10 字节)】 作用 取址然后取值swap函数 交换变量的值指针接收器来改变结构体里面…

Python机器学习入门指南

前言 机器学习 作为人工智能领域的核心组成&#xff0c;是计算机程序学习数据经验以优化自身算法&#xff0c;并产生相应的“智能化的”建议与决策的过程。 一个经典的机器学习的定义是&#xff1a; A computer program is said to learn from experience E with respect to …

【Edabit 算法 ★☆☆☆☆☆】 Return Something to Me!

【Edabit 算法 ★☆☆☆☆☆】 Return Something to Me! strings language_fundamentals Instructions Write a function that returns the string "something" joined with a space " " and the given argument a. Examples giveMeSomething(“is bett…

打造属于自己的vue图标库

hfex-icon图标库 Install npm i -D hfex-icon主要提供2种使用方式 方式一 通过svg图标资源&#xff0c;借助unplugin-icons库将svg图标文件生成vue组件&#xff0c;然后通过vue组件的引入方式在vue中使用 unplugin-icons 兼容vue2和vue3 在vue.config.js的plugins中配置…

【C语言】进阶——程序编译

目录 一&#xff1a;&#x1f512;程序环境 程序的翻译环境和执行环境 &#x1f4a1;1.1翻译环境 预编译阶段&#xff1a; 编译阶段&#xff1a; 汇编阶段&#xff1a; 链接阶段&#xff1a; &#x1f4a1;1.2运行环境 二&#xff1a;&#x1f512;预处理详解 &…