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

vue3 打印局部网页、网页下载为图片、下载为pdf-自动分页,几行代码搞定

经常有一些需求,要将网页保存为一张图片,感觉异常困难,这里发现一个简单的办法。

这么简单,直接一句哇塞,老板:马上完成任务。

先安装几个依赖

npm i howuse html2canvas jspdf

下载图片代码

 <button @click="downloadImg()">{{ loadingImg ? "正在..." : "" }}下载为图片</button><div style="text-align: center" class="howuse-demo-chart" ref="fileArea">xxxx 内容,echarts 、表格 随便写</div>
import { useHtmlAsImage } from "howuse/pdf";const fileArea = ref();
const { downloadImg, loading: loadingImg } = useHtmlAsImage({ref: fileArea,fileName: "雨巷.png", // 文件名称
});

下载pdf 代码

 <button @click="downloadPdf()">{{ loadingPdf ? "正在..." : "" }}下载为Pdf</button><div style="text-align: center" class="howuse-demo-chart" ref="fileArea">xxxx 内容,echarts 、表格 随便写</div>
import { useHtmlAsPdf } from "howuse/pdf";
const fileArea = ref();
// pdfOpts 是pdf的参数
const { downloadPdf, loading: loadingPdf } = useHtmlAsPdf({ref: fileArea,fileName: "雨巷.pdf",
});

打印局部网页代码,调用浏览器打印窗口直接打印

<button @click="printPdf()">打印pdf</button><div style="text-align: center" class="howuse-demo-chart" ref="fileArea">xxxx 内容,echarts 、表格 随便写</div>
// pdfOpts 是pdf的参数
const { printPdf, loading } = useHtmlAsPdf({ref: fileArea,fileName: "雨巷.pdf",
});

相关文章:

vue3 打印局部网页、网页下载为图片、下载为pdf-自动分页,几行代码搞定

经常有一些需求&#xff0c;要将网页保存为一张图片&#xff0c;感觉异常困难&#xff0c;这里发现一个简单的办法。 这么简单&#xff0c;直接一句哇塞&#xff0c;老板&#xff1a;马上完成任务。 先安装几个依赖 npm i howuse html2canvas jspdf 下载图片代码 <button …...

力扣hot100:34. 在排序数组中查找元素的第一个和最后一个位置(二分查找的理解)

我们知道使用二分查找能找到值所在的位置。假如我们在找到值后仍然不断的更新指针会发生什么&#xff1f;我们可以利用这一点来找到最左边的以及最右边的值。 如果当nums[mid]target时&#xff0c;使得 rightmid-1&#xff0c;那么最终会使得target在right的右边。 如果当nums[…...

几何相互作用GNN预测3D-PLA

预测PLA是药物发现中的核心问题。最近的进展显示了将ML应用于PLA预测的巨大潜力。然而,它们大多忽略了复合物的3D结构和蛋白质与配体之间的物理相互作用,而这对于理解结合机制至关重要。作者提出了一种结合3D结构和物理相互作用的几何相互作用图神经网络GIGN,用于预测蛋白质…...

2024最新版使用PyCharm搭建Anaconda

2024最新版使用PyCharm搭建Anaconda 因为pycharm自带的包不全&#xff0c;或者下载的时候比较慢&#xff0c;所以我们直接用anaconda的包&#xff0c;毕竟我们以后还会学到很多的包&#xff0c;不多说&#xff0c;直接开干&#xff01; 一、下载Pycharm、Anacoda pycharm中文网…...

前台于后台项目

一&#xff1a;技术栈 前台&#xff1a;vue3element plus 后台&#xff1a;reactant desgin 二&#xff1a;项目中的问题&#xff1a; 多人协同开发导致样式冲突 ui框架中组件的使用 ui框架中组件样式的修改 精度缺失问题 框架的使用 三&#xff1a;解决方案&#xff1a; …...

Magical Combat VFX

这个包包含30个可供游戏使用的VFX,有各种口味,为您的游戏增添趣味! 所有VFX都经过了很好的优化,可以在所有平台上使用。 这个包特别有一堆闪电魔法,有两种主要的变体,一种是深色的,另一种是浅色的。但它也提供了一系列其他视觉效果,如神圣咒语、音乐主题等等! 我们提供…...

hadoop伪分布式环境搭建详解

&#xff08;操作系统是centos7&#xff09; 1.更改主机名&#xff0c;设置与ip 的映射关系 hostname //查看主机名 vim /etc/hostname //将里面的主机名更改为master vim /etc/hosts //将127.0.0.1后面的主机名更改为master&#xff0c;在后面加入一行IP地址与主机名之间的…...

day12-SpringBootWeb 登录认证

一、登录功能 Slf4j RestController public class LoginController {Autowiredprivate EmpService empService;PostMapping("/login")public Result login(RequestBody Emp emp){log.info("员工登录: {}", emp);Emp e empService.login(emp);//登录失败, …...

内外网数据单向导入导出 如何提升效率确保安全性?

金融、证券、税务、海关、军工、国央企、生物医药等涉密行业&#xff0c;为了保护内部的核心数据&#xff0c;都会将网络进行物理隔离&#xff0c;网络物理隔离主要是采用隔离硬件设备&#xff0c;在人工或者软件的控制下&#xff0c;进行内外网的切换和数据交换。 传统的内外网…...

Spring核心方法:Refresh全解(WebMVC如何装配、关联)

Spring核心方法&#xff1a;Refresh全解(WebMVC如何装配、关联) 这里是一个表格&#xff0c;列出了Spring容器刷新过程中执行的方法以及它们的作用&#xff1a; 方法名称描述prepareRefresh()初始化一些属性和状态&#xff0c;例如启动时间戳、活动标志、环境变量等。obtainF…...

TCP:三次握手四次挥手及相关问题:

连接—三次握手&#xff1a; 流程图&#xff1a; 过程详解&#xff1a; 客户端(connect)连接服务器&#xff08;listen) Client将标志位SYN置为1,随机产生一个值seqx, 并将该数据包发送给Server, Client进入SYN_ SENT状态&#xff0c;等待Server确认。Server收到数据包后由标…...

链式二叉树--前序中序后序遍历,高度,节点个数问题

目录 前言&#xff1a; 一&#xff1a;链式二叉树的结构定义 二&#xff1a;链式二叉树的遍历--->前序&#xff0c;中序&#xff0c;后序 1.前序 递归展开图分析 2.中序 递归展开图分析 3.后序 三&#xff1a;二叉树结点的求解 1.二叉树总结点 递归展开分析 2…...

HCIA——TCP协议详解

目录 1、TCP概念及协议头部格式 1.1TCP特点 1.2TCP协议协议头部格式 1.3字段进行介绍 1.3.1源端口和目的端口 1.3.2序号(seq) 1.3.3确认序号(ack) 1.3.4数据偏移 1.3.5标志位 1.3.6窗口 1.3.7校验和 1.3.8紧急指针 2、TCP的可靠性 2.1 TCP可靠性的保障 2.2排序机…...

Hadoop大数据应用:Linux 部署 HDFS 分布式集群

目录 一、实验 1.环境 2.Linux 部署 HDFS 分布式集群 3.Linux 使用 HDFS 文件系统 二、问题 1.ssh-copy-id 报错 2. 如何禁用ssh key 检测 3.HDFS有哪些配置文件 4.hadoop查看版本报错 5.启动集群报错 6.hadoop 的启动和停止命令 7.上传文件报错 8.HDFS 使用命令 一…...

纯 CSS 实现文字换行环绕效果

实现效果 实现代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>Document</title><…...

【爬虫逆向】Python逆向采集猫眼电影票房数据

进行数据抓包&#xff0c;因为这个网站有数据加密 !pip install jsonpathCollecting jsonpathDownloading jsonpath-0.82.2.tar.gz (10 kB)Preparing metadata (setup.py) ... done Building wheels for collected packages: jsonpathBuilding wheel for jsonpath (setup.py) .…...

解析服务器下载速度:上行、下行与带宽之谜

在日常使用中&#xff0c;我们经常会遇到从服务器下载内容速度忽快忽慢的情况&#xff0c;即便服务器的硬件配置如4核CPU、8GB内存和12Mbps的带宽看似足够。为何会出现这种现象&#xff1f;这背后涉及到网络中的上行、下行以及带宽等关键概念。本文旨在揭开这些术语背后的含义&…...

计算机网络的概念

目录 <计算机网络的定义> <计算机网络的形成与发展> 1.第一阶段远程联机阶段----60年代以前: 2.第二阶段多机互联网络阶段----60年代中期: 3.第三阶段标准化网络阶段----70年代末: 4.第四阶段网络互联与高速网络阶段一90年代: <计算机网络的未来--下一代…...

MATLAB中的脚本和函数有什么区别?

MATLAB中的脚本和函数是两种不同的代码组织方式&#xff0c;它们在结构、功能和使用方式上有显著的区别。以下是对这两种方式的详细解释&#xff0c;总计约2000字。 一、MATLAB脚本 MATLAB脚本是一种包含多条MATLAB命令的文件&#xff0c;这些命令按照在文件中的顺序依次执行…...

从电影《沙丘》说起——对人工智能的思考

正文 从《沙丘》开始说起 之前看《沙丘》电影&#xff0c;里面有一类角色叫门泰特&#xff0c;这类人大脑可以飞快地运算&#xff0c;在电影设定里是替换人工智能、机器运算的存在。男主保罗也是这类型的人&#xff0c;但他可能基因更强大&#xff0c;吸食了香料后&#xff0…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

Golang——7、包与接口详解

包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...

零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程

STM32F1 本教程使用零知标准板&#xff08;STM32F103RBT6&#xff09;通过I2C驱动ICM20948九轴传感器&#xff0c;实现姿态解算&#xff0c;并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化&#xff0c;适合嵌入式及物联网开发者。在基础驱动上新增…...

倒装芯片凸点成型工艺

UBM&#xff08;Under Bump Metallization&#xff09;与Bump&#xff08;焊球&#xff09;形成工艺流程。我们可以将整张流程图分为三大阶段来理解&#xff1a; &#x1f527; 一、UBM&#xff08;Under Bump Metallization&#xff09;工艺流程&#xff08;黄色区域&#xff…...

6.9本日总结

一、英语 复习默写list11list18&#xff0c;订正07年第3篇阅读 二、数学 学习线代第一讲&#xff0c;写15讲课后题 三、408 学习计组第二章&#xff0c;写计组习题 四、总结 明天结束线代第一章和计组第二章 五、明日计划 英语&#xff1a;复习l默写sit12list17&#…...

STL 2迭代器

文章目录 1.迭代器2.输入迭代器3.输出迭代器1.插入迭代器 4.前向迭代器5.双向迭代器6.随机访问迭代器7.不同容器返回的迭代器类型1.输入 / 输出迭代器2.前向迭代器3.双向迭代器4.随机访问迭代器5.特殊迭代器适配器6.为什么 unordered_set 只提供前向迭代器&#xff1f; 1.迭代器…...

使用python进行图像处理—图像变换(6)

图像变换是指改变图像的几何形状或空间位置的操作。常见的几何变换包括平移、旋转、缩放、剪切&#xff08;shear&#xff09;以及更复杂的仿射变换和透视变换。这些变换在图像配准、图像校正、创建特效等场景中非常有用。 6.1仿射变换(Affine Transformation) 仿射变换是一种…...

AI书签管理工具开发全记录(十八):书签导入导出

文章目录 AI书签管理工具开发全记录&#xff08;十八&#xff09;&#xff1a;书签导入导出1.前言 &#x1f4dd;2.书签结构分析 &#x1f4d6;3.书签示例 &#x1f4d1;4.书签文件结构定义描述 &#x1f523;4.1. ​整体文档结构​​4.2. ​核心元素类型​​4.3. ​层级关系4.…...