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

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框架全景解读与入门指南!

亲爱的技术爱好者们&#xff0c;我是你们的老朋友—— 一个热爱.NET和AI相关技术的博主&#xff0c;在今天这个信息与数据爆炸的时代&#xff0c;我们始终寻求着处理数据分析任务的更优雅、更高效的方式。Microsoft团队推出了一个叫做TaskWeaver的神器&#xff0c;这可不仅仅是…...

LabVIEW灵活集成与调试的方法

在LabVIEW开发中&#xff0c;为了构建一个既便于调试又能灵活集成到主VI中的控制VI&#xff0c;开发者需要采用适当的编程方式和架构。常见的选择包括模块化设计、状态机架构以及事件驱动编程。这些方法有助于简化调试过程、提高系统的稳定性&#xff0c;并确保代码的重用性和可…...

网络药理学:分子对接之二:PDB数据库的使用(已知PDB ID)、PubChem数据库如果没有3D结构

PDB数据库使用 官方地址&#xff1a;https://www.rcsb.org/ 首页如下&#xff1a; 我们以热休克蛋白HSP90AA1为例&#xff0c;其PDB ID为7DHG&#xff0c;所以我们在搜索栏输入7DHG&#xff1a; 主要关注红框里的几个地方。 Download 下载文件&#xff0c;一般选择PDB For…...

JS获取页面中video标签视频的封面和时长

从HTML中提取Video信息 /*** 从html字符串中提取video标签* 入参&#xff1a; {String} htmlString* 出参&#xff1a;{Array} 数组*/ function extractVideosFromHTML(htmlString) {const dom new DOMParser().parseFromString(htmlString, text/html);const videos Arr…...

LLM大模型学习:AI Agent综述

AI Agent是什么 将LLM思想链接到一起&#xff0c;自主实现用户设定的任何目标。只需要告诉AutoGPT一个目标&#xff0c;能自主生成执行计划。 吴恩达&#xff1a;“与其争论哪些工作才算是真正的 Agent&#xff0c;不如承认系统可以具有不同程度的 Agentic 特性。” 核心在于…...

极米科技:走出舒适圈,推动数据架构现代化升级 | OceanBase 《DB大咖说》

《DB 大咖说》第 13 期&#xff0c;邀请到了极米科技软件与创新产品线高级架构师施刘凡来进行分享。 在小红书平台上&#xff0c;“是否应将家里的电视升级为投影仪&#xff1f;”这一话题激发了上百万篇笔记的分享与推荐&#xff0c;反映出年轻群体对投影仪的偏好。随着手机、…...

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确认完成后 即链路层配置完成排查网络层错误 排查终端主…...

格式化的硬盘能恢复数据吗?拯救数据的可能性

在信息技术高速发展的今天&#xff0c;硬盘作为计算机的核心存储部件&#xff0c;承载着大量的数据和文件。然而&#xff0c;有时因为误操作或其他原因&#xff0c;我们可能需要对硬盘进行格式化&#xff0c;这往往导致重要数据的丢失。 那么&#xff0c;格式化后的硬盘数据是否…...

亚信安全出席第五届国际反病毒大会 探究AI现代网络勒索治理

近日&#xff0c;第二届网络空间安全&#xff08;天津&#xff09;论坛正式开幕。本届论坛由天津市政府主办&#xff0c;国家计算机病毒应急处理中心、天津市公安局、天津市滨海新区政府承办&#xff0c;国家网络与信息安全信息通报中心协办&#xff0c;围绕“共建网络安全 共治…...

C语言从头学58——学习头文件math.h(一)

math.h 头文件提供了很多数学计算方面的函数。 一、使用数学函数前需要了解的两个类型、两个宏 1、float_t&#xff1a;当前系统能够有效执行float运算的类型&#xff0c;宽度不少于float。 2、double_t&#xff1a;当前系统能够有效执行double运算的类型&#xff0c;宽度不…...

前端JS常见面试题

数据双向绑定 Bug解决 集成工作涉及 版本node 依赖包报错 版本问题&#xff01;&#xff01;&#xff01;ElementUI、Cesium、ant-design 配置、代码和其他 混入 在Vue中&#xff0c;混入&#xff08;Mixins&#xff09;是一种非常有用的功能&#xff0c;它允许你创建可复…...

利用深度学习实现验证码识别-4-ResNet18+imagecaptcha

在当今的数字化世界中&#xff0c;验证码&#xff08;CAPTCHA&#xff09;是保护网站免受自动化攻击的重要工具。然而&#xff0c;对于用户来说&#xff0c;验证码有时可能会成为一种烦恼。为了解决这个问题&#xff0c;我们可以利用深度学习技术来自动识别验证码&#xff0c;从…...

IDC基础学习笔记

一、数据中心介绍 1、数据中心级别划分&#xff1a; 2、数据中心结构&#xff1a; 3、IT系统组成 二、数据中心硬件知识 1、服务器组件 服务器的正面接口&#xff1a; 服务器的反面接口&#xff1a; &#xff08;1&#xff09;CPU CPU定义&#xff1a;中央处理器&#xff08…...

Mysql基础练习题 1527.患某种疾病的患者 (力扣)

查询患有 I 类糖尿病的患者 ID &#xff08;patient_id&#xff09;、患者姓名&#xff08;patient_name&#xff09;以及其患有的所有疾病代码&#xff08;conditions&#xff09;。I 类糖尿病的代码总是包含前缀 DIAB1 。 题目链接&#xff1a; https://leetcode.cn/proble…...

Mysql链接异常 | [08001] Public Key Retrieval is not allowed

Datagrid报错 [08001] Public Key Retrieval is not allowed 这个错误通常是由于 MySQL 8.0 中的新特性导致的。默认情况下&#xff0c;MySQL 8.0 使用 caching_sha2_password 作为认证插件&#xff0c;而你需要在连接 URL 中明确允许公钥检索或者使用老版本的认证方式 mysql…...

vue3项目中如何动态循环设置ref并获取使用

前言&#xff1a;vue2可通过ref来获取当前的dom&#xff0c;但是vue3有个问题&#xff0c;就是必须定义ref的变量名&#xff0c;才能使用&#xff1b;倘若有多个ref&#xff0c;一个个去定义未免过于繁琐&#xff0c;还有一种情况就是dom是使用v-for循环出来的&#xff0c;那么…...

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组件&#xff0c;使用URP或HDRP则不同。 1.相机属性介绍 Clear Flags&#xff1a; 清除标记…...

数学基础 -- 线性代数之LU分解

LU分解 LU分解&#xff08;LU Decomposition&#xff09;是线性代数中非常重要的一种矩阵分解方法。它将一个方阵分解为一个下三角矩阵&#xff08;L矩阵&#xff09;和一个上三角矩阵&#xff08;U矩阵&#xff09;的乘积。在数值线性代数中&#xff0c;LU分解广泛用于求解线…...

Linux 文件类型,目录与路径,文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

Neo4j 集群管理:原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...

sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...