Vue如何将网页转换成图片或PDF并上传
一.使用html2canvas获取页面元素并绘制成图片
htmlcanvas中文文档
npm install --save html2canvas
<template><div><button @click="uploadImg">上传</button><div ref="yourDom"><!-- ...图片中页面内容 --><img src="@/assets/logo/logo.png" alt="" /></div></div>
</template>
import html2canvas from 'html2canvas';
//base64转filebase64ToFile(dataURL, filename) {let arr = dataURL?.split?.(',');let youType = arr[0].match(/:(.*?);/)[1];let bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], filename + '.' + youType.split('/')[1], { type: youType });},//点击上传按钮uploadImg() {html2canvas(this.$refs.yourDom, {allowTaint: true, //是否允许不同源的图片污染画布useCORS: true, //是否尝试使用 CORS 从服务器加载图片scale: 2, //用于渲染的比例,默认为浏览器设备像素比率。}).then(canvas => {// canvas.toDataURL(type, encoderOptions) 是 JavaScript 中用于将 <canvas> 元素的内容转换为数据 URL 的方法// type:指定输出的图像类型,默认为 "image/png"。也可以是 "image/jpeg" 或 "image/webp" 等格式。// encoderOptions:用于指定图像编码质量或压缩级别的参数(取值范围为 0-1),仅适用于 "image/jpeg" 和 "image/webp" 格式。let imgBase64Url = canvas.toDataURL('image/jpeg', 1);let imgFile = this.base64ToFile(imgBase64Url, '图片名称');console.log('🚀 ~ canvasImg ~ imgFile:', imgFile);//你的上传接口方法//let formData = new FormData();//formData.append('avatarfile', imgFile);//uploadAvatar(formData).then(response => {//console.log(window.location.origin + process.env.VUE_APP_BASE_API + response.imgUrl);});});},
效果


二.使用jspdf生成pdf并将图片添加进去
jsPDF中文文档并找不到啥需要的东西

npm install jspdf --save
import jsPDF from 'jspdf';
将uploadImg方法中上传图片部分换为转换成pdf并上传
//点击上传按钮uploadImg() {html2canvas(this.$refs.yourDom, {allowTaint: true, //是否允许不同源的图片污染画布useCORS: true, //是否尝试使用 CORS 从服务器加载图片scale: 2, //用于渲染的比例,默认为浏览器设备像素比率。}).then(canvas => {// canvas.toDataURL(type, encoderOptions) 是 JavaScript 中用于将 <canvas> 元素的内容转换为数据 URL 的方法// type:指定输出的图像类型,默认为 "image/png"。也可以是 "image/jpeg" 或 "image/webp" 等格式。// encoderOptions:用于指定图像编码质量或压缩级别的参数(取值范围为 0-1),仅适用于 "image/jpeg" 和 "image/webp" 格式。let imgBase64Url = canvas.toDataURL('image/jpeg', 1);this.imgToPdf(canvas, imgBase64Url);});},
//图片转pdfimgToPdf(canvas, imgBase64Url) {let pdf = new jsPDF('p', 'pt', 'a4');pdf.addImage(imgBase64Url, 'JPEG', 0, 0, canvas.width * 0.2, canvas.height * 0.2);let pdfBlob = pdf.output('blob');let pdfFile = new File([pdfBlob], '文件名字.pdf', { type: 'application/pdf' });console.log('pdfFile', pdfFile);//你的上传接口方法//let formData = new FormData();//formData.append('avatarfile', pdfFile);//uploadAvatar(formData).then(response => {//console.log(window.location.origin + process.env.VUE_APP_BASE_API + response.imgUrl);//});//下载文件// pdf.save("文件名字.pdf");},
效果


相关文章:
Vue如何将网页转换成图片或PDF并上传
一.使用html2canvas获取页面元素并绘制成图片 htmlcanvas中文文档 npm install --save html2canvas<template><div><button click"uploadImg">上传</button><div ref"yourDom"><!-- ...图片中页面内容 --><img s…...
【引领数据分析革命】TaskWeaver框架全景解读与入门指南!
亲爱的技术爱好者们,我是你们的老朋友—— 一个热爱.NET和AI相关技术的博主,在今天这个信息与数据爆炸的时代,我们始终寻求着处理数据分析任务的更优雅、更高效的方式。Microsoft团队推出了一个叫做TaskWeaver的神器,这可不仅仅是…...
LabVIEW灵活集成与调试的方法
在LabVIEW开发中,为了构建一个既便于调试又能灵活集成到主VI中的控制VI,开发者需要采用适当的编程方式和架构。常见的选择包括模块化设计、状态机架构以及事件驱动编程。这些方法有助于简化调试过程、提高系统的稳定性,并确保代码的重用性和可…...
网络药理学:分子对接之二:PDB数据库的使用(已知PDB ID)、PubChem数据库如果没有3D结构
PDB数据库使用 官方地址:https://www.rcsb.org/ 首页如下: 我们以热休克蛋白HSP90AA1为例,其PDB ID为7DHG,所以我们在搜索栏输入7DHG: 主要关注红框里的几个地方。 Download 下载文件,一般选择PDB For…...
JS获取页面中video标签视频的封面和时长
从HTML中提取Video信息 /*** 从html字符串中提取video标签* 入参: {String} htmlString* 出参:{Array} 数组*/ function extractVideosFromHTML(htmlString) {const dom new DOMParser().parseFromString(htmlString, text/html);const videos Arr…...
LLM大模型学习:AI Agent综述
AI Agent是什么 将LLM思想链接到一起,自主实现用户设定的任何目标。只需要告诉AutoGPT一个目标,能自主生成执行计划。 吴恩达:“与其争论哪些工作才算是真正的 Agent,不如承认系统可以具有不同程度的 Agentic 特性。” 核心在于…...
极米科技:走出舒适圈,推动数据架构现代化升级 | OceanBase 《DB大咖说》
《DB 大咖说》第 13 期,邀请到了极米科技软件与创新产品线高级架构师施刘凡来进行分享。 在小红书平台上,“是否应将家里的电视升级为投影仪?”这一话题激发了上百万篇笔记的分享与推荐,反映出年轻群体对投影仪的偏好。随着手机、…...
IP学习——Fiveday
设备排错 [R1]display ip interface brief 查看路由器接口的IP地址信息 [R1]display current-configuration int g0/0/1.10 查看路由器接口的IP地址信息 TG---> trunk查看vlan指令:displayvan其中UT--->accessc.vlan确认完成后 即链路层配置完成排查网络层错误 排查终端主…...
格式化的硬盘能恢复数据吗?拯救数据的可能性
在信息技术高速发展的今天,硬盘作为计算机的核心存储部件,承载着大量的数据和文件。然而,有时因为误操作或其他原因,我们可能需要对硬盘进行格式化,这往往导致重要数据的丢失。 那么,格式化后的硬盘数据是否…...
亚信安全出席第五届国际反病毒大会 探究AI现代网络勒索治理
近日,第二届网络空间安全(天津)论坛正式开幕。本届论坛由天津市政府主办,国家计算机病毒应急处理中心、天津市公安局、天津市滨海新区政府承办,国家网络与信息安全信息通报中心协办,围绕“共建网络安全 共治…...
C语言从头学58——学习头文件math.h(一)
math.h 头文件提供了很多数学计算方面的函数。 一、使用数学函数前需要了解的两个类型、两个宏 1、float_t:当前系统能够有效执行float运算的类型,宽度不少于float。 2、double_t:当前系统能够有效执行double运算的类型,宽度不…...
前端JS常见面试题
数据双向绑定 Bug解决 集成工作涉及 版本node 依赖包报错 版本问题!!!ElementUI、Cesium、ant-design 配置、代码和其他 混入 在Vue中,混入(Mixins)是一种非常有用的功能,它允许你创建可复…...
利用深度学习实现验证码识别-4-ResNet18+imagecaptcha
在当今的数字化世界中,验证码(CAPTCHA)是保护网站免受自动化攻击的重要工具。然而,对于用户来说,验证码有时可能会成为一种烦恼。为了解决这个问题,我们可以利用深度学习技术来自动识别验证码,从…...
IDC基础学习笔记
一、数据中心介绍 1、数据中心级别划分: 2、数据中心结构: 3、IT系统组成 二、数据中心硬件知识 1、服务器组件 服务器的正面接口: 服务器的反面接口: (1)CPU CPU定义:中央处理器(…...
Mysql基础练习题 1527.患某种疾病的患者 (力扣)
查询患有 I 类糖尿病的患者 ID (patient_id)、患者姓名(patient_name)以及其患有的所有疾病代码(conditions)。I 类糖尿病的代码总是包含前缀 DIAB1 。 题目链接: https://leetcode.cn/proble…...
Mysql链接异常 | [08001] Public Key Retrieval is not allowed
Datagrid报错 [08001] Public Key Retrieval is not allowed 这个错误通常是由于 MySQL 8.0 中的新特性导致的。默认情况下,MySQL 8.0 使用 caching_sha2_password 作为认证插件,而你需要在连接 URL 中明确允许公钥检索或者使用老版本的认证方式 mysql…...
vue3项目中如何动态循环设置ref并获取使用
前言:vue2可通过ref来获取当前的dom,但是vue3有个问题,就是必须定义ref的变量名,才能使用;倘若有多个ref,一个个去定义未免过于繁琐,还有一种情况就是dom是使用v-for循环出来的,那么…...
stm32之SPI通信协议
文章目录 前言一、SPI通信协议1.1 SPI简介1.2 SPI通信特点1.3 SPI与I2C对比 二、SPI硬件电路三、SPI通信原理四、SPI时序单元4.1 起始和终止条件4.2 交换一个字节(模式1)4.3 交换一个字节(模式0)4.4 交换一个字节(模式2和3) 五、SPI时序5.1 发送指令5.2 指定地址写5.3 指定地址…...
Unity 摄像机(Camera)详解
文章目录 0.前言1.相机属性介绍2.Unity 中多个相机画面堆叠显示2.1 3D 摄像机2.2 UI 摄像机2.3 摄像机的Culling Mask设置 0.前言 本文介绍的是使用Unity默认的内置渲染管线下的Camera组件,使用URP或HDRP则不同。 1.相机属性介绍 Clear Flags: 清除标记…...
数学基础 -- 线性代数之LU分解
LU分解 LU分解(LU Decomposition)是线性代数中非常重要的一种矩阵分解方法。它将一个方阵分解为一个下三角矩阵(L矩阵)和一个上三角矩阵(U矩阵)的乘积。在数值线性代数中,LU分解广泛用于求解线…...
<6>-MySQL表的增删查改
目录 一,create(创建表) 二,retrieve(查询表) 1,select列 2,where条件 三,update(更新表) 四,delete(删除表…...
基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销,平衡网络负载,延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...
P3 QT项目----记事本(3.8)
3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...
视频字幕质量评估的大规模细粒度基准
大家读完觉得有帮助记得关注和点赞!!! 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用,因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型(VLMs)在字幕生成方面…...
多种风格导航菜单 HTML 实现(附源码)
下面我将为您展示 6 种不同风格的导航菜单实现,每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...
【JavaWeb】Docker项目部署
引言 之前学习了Linux操作系统的常见命令,在Linux上安装软件,以及如何在Linux上部署一个单体项目,大多数同学都会有相同的感受,那就是麻烦。 核心体现在三点: 命令太多了,记不住 软件安装包名字复杂&…...
用机器学习破解新能源领域的“弃风”难题
音乐发烧友深有体会,玩音乐的本质就是玩电网。火电声音偏暖,水电偏冷,风电偏空旷。至于太阳能发的电,则略显朦胧和单薄。 不知你是否有感觉,近两年家里的音响声音越来越冷,听起来越来越单薄? —…...
AI+无人机如何守护濒危物种?YOLOv8实现95%精准识别
【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而,传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案,能够实现大范围覆盖并远程采集数据。尽管具备这些优势…...
MySQL JOIN 表过多的优化思路
当 MySQL 查询涉及大量表 JOIN 时,性能会显著下降。以下是优化思路和简易实现方法: 一、核心优化思路 减少 JOIN 数量 数据冗余:添加必要的冗余字段(如订单表直接存储用户名)合并表:将频繁关联的小表合并成…...
比较数据迁移后MySQL数据库和OceanBase数据仓库中的表
设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...
