页面上的内容的生成图片后,保存为word,并下载

页面上的内容的生成图片后,保存为word,并下载 juqery

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Download Page Screenshot as Word</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
</head>
<body><div id="content-to-capture"><!-- This is the content you want to capture --><h1>Hello, World!</h1><p>This is an example paragraph.</p></div><button id="downloadWord">Download Word</button><script>$(document).ready(function() {$('#downloadWord').click(function() {html2canvas(document.getElementById('content-to-capture')).then(function(canvas) {// Convert canvas to data URLconst dataUrl = canvas.toDataURL('image/png');// Create a Blob from the data URLconst byteString = atob(dataUrl.split(',')[1]);const mimeString = dataUrl.split(',')[0].split(':')[1].split(';')[0];const ab = new ArrayBuffer(byteString.length);const ia = new Uint8Array(ab);for (let i = 0; i < byteString.length; i++) {ia[i] = byteString.charCodeAt(i);}const blob = new Blob([ab], {type: mimeString});// Generate a simple .doc file contentconst content = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>Export HTML to Word Document with JavaScript</title></head><body><img src='${dataUrl}' /></body></html>`;// Create a Blob for the .doc fileconst docBlob = new Blob(['\ufeff', content], {type: 'application/msword'});// Save the Blob as a filesaveAs(docBlob, 'document.doc');});});});</script>
</body>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

Android无限层扩展多级recyclerview列表+实时搜索弹窗

业务逻辑&#xff1a; 点击选择&#xff0c;弹出弹窗&#xff0c;列表数据由后台提供&#xff0c;不限层级&#xff0c;可叠加无限层子级&#xff1b; 点击item展开收起&#xff0c;点击尾部icon单选选中&#xff0c;点击[确定]为最终选中&#xff0c;收起弹窗&#xff1b; 搜索…

SpringBoot+ClickHouse集成

前面已经完成ClickHouse的搭建&#xff0c;创建账号&#xff0c;创建数据库&#xff0c;保存数据库等&#xff0c;接下来就是在SpringBoot项目中集成ClickHouse。 一&#xff0c;引入依赖 <!-- SpringBoot集成ClickHouse --> <dependency><groupId>com.baom…

【基于轻量型架构的WEB开发】课程 12.5 数据回写 Java EE企业级应用开发教程 Spring+SpringMVC+MyBatis

12.5 数据回写 12.5.1 普通字符串的回写 接下来通过HttpServletResponse输出数据的案例&#xff0c;演示普通字符串的回写&#xff0c;案例具体实现步骤如下。 1 创建一个数据回写类DataController&#xff0c;在DataController类中定义 showDataByResponse()方法&#xff…

Java实现JWT登录认证

文章目录 什么是JWT?为什么需要令牌?如何实现?添加依赖&#xff1a;JwtUtils.java&#xff08;生成、解析Token的工具类&#xff09;jwt配置&#xff1a;登录业务逻辑&#xff1a;其他关联代码&#xff1a;测试&#xff1a; 什么是JWT? JWT&#xff08;Json Web Token&…

光伏无人机踏勘,照亮光伏未来!

光伏电站选址地分散在各地&#xff0c;想要精准获取该地的地形特点与屋顶面积等信息&#xff0c;传统的人工踏勘耗时耗力且精度无法保证&#xff0c;难以满足现代光伏项目的规模快发发展需求。光伏无人机踏勘&#xff0c;照亮光伏未来&#xff01; 在光伏无人机智能踏勘设计系统…

Vue全栈开发旅游网项目(7)-搜索界面开发及其接口联调

1.搜索界面开发 1.1 模糊查询 文件地址&#xff1a;pycharm- class SightListView(ListView):paginate_by 5def get_queryset(self):#is_validTrue&#xff1a;表中is_valid列&#xff0c;有值则被查询出来query Q(is_validTrue)#1.获得热门景点is_hot self.request.GET.…

『 Linux 』网络传输层 - TCP(二)

文章目录 TCP六个标志位TCP的连接三次握手 四次挥手为什么是三次握手和四次挥手 重传机制 TCP六个标志位 在TCP协议报文的报头中存在一个用于标志TCP报文类型的标志位(不考虑保留标志位),这些标志位以比特位选项的方式存在,即对应标志位为0则表示为假,对应标志位为1则为真; SYN…

Django学习-项目部署

WSGI定义&#xff1a; uWSGI定义&#xff1a; 安装uWSGI&#xff1a; 配置uWSGI&#xff1a; uWSGI常见问题汇总&#xff1a; 安装nginx&#xff1a; 配置&#xff1a; 启动/停止dnginx 修改uWSGI配置&#xff1a; 常见问题解决方法&#xff1a; nginx静态文件配置&#xff…

迅为RK3588开发板Android多屏显示之多屏同显和多屏异显

迅为RK3588开发板是一款低功耗、高性能的处理器&#xff0c;适用于基于arm的PC和Edge计算设备、个人移动互联网设备等数字多媒体应用&#xff0c;RK3588支持8K视频编解码&#xff0c;内置GPU可以完全兼容OpenGLES 1.1、2.0和3.2。RK3588引入了新一代完全基于硬件的最大4800万像…

QML项目实战:自定义Button

目录 一.添加模块 ​1.QtQuick.Controls 2.1 2.QtGraphicalEffects 1.12 二.自定义Button 1.颜色背景设置 2.设置渐变色背景 3.文本设置 4.点击设置 5.阴影设置 三.效果 1.当enabled为true 2.按钮被点击时 3.当enabled为false 四.代码 一.添加模块 1.QtQuick.Con…

基于C#实现Windows后台窗口操作与图像处理技术分析

在Windows编程中&#xff0c;操作后台窗口是一项复杂而有用的技术。它可以用来自动化用户界面测试、应用程序机器人等场景。本文将深入探讨如何在C#中绑定后台窗口、获取后台窗口界面图片&#xff0c;以及在图片中寻找指定图标并获取坐标。本技术文章结合最先进的资料与实践经验…

数据库基础(1) . 关系型数据库

1.数据库 database 1.1.数据持久化 数据持久化&#xff08;Data Persistence&#xff09;指的是将程序中的数据保存到某种持久化的存储介质&#xff08;如硬盘、SSD、磁带等&#xff09;上的过程&#xff0c;使得即使在程序终止后&#xff0c;数据依然可以被保留下来并在下次…

Python学习的自我理解和想法(27)

学的是b站的课程&#xff08;千锋教育&#xff09;&#xff0c;跟老师写程序&#xff0c;不是自创的代码&#xff01; 今天是学Python的第27天&#xff0c;学的内容是python操作pptx和pdf&#xff0c;但是这节博客只会介绍如何新建pptx和加密pdf。开学了&#xff0c;时间不多&…

鸿蒙移动应用开发-------初始arkts

一. 什么是arkts ArkTS是HarmonyOS优选的主力应用开发语言。 ArkTS围绕应用开发在TypeScript&#xff08;简称TS&#xff09;生态基础上做了进一步扩展&#xff0c;保持了TS的基本风格&#xff0c;同时通过规范定义强化开发期静态检查和分析&#xff0c;提升程序执行稳定性和…

Linux(CentOS)安装 JDK

1、下载 JDK 官网&#xff1a;https://www.oracle.com/ 2、上传 JDK 文件到 CentOS&#xff0c;使用FinalShell远程登录工具&#xff0c;并且使用 root 用户登录 3、解压 JDK 创建目录 /export/server mkdir -p /export/server 解压到目录 /export/server tar -zxvf jdk-17…

qt QStandardItemModel详解

1、概述 QStandardItemModel是Qt框架中提供的一个基于项的模型类&#xff0c;用于存储和管理数据&#xff0c;这些数据可以以表格的形式展示在视图控件&#xff08;如QTableView、QTreeView等&#xff09;中。QStandardItemModel支持丰富的数据操作&#xff0c;包括添加、删除…

SpringBoot框架在在线教育领域的应用

4系统概要设计 4.1概述 本系统采用B/S结构(Browser/Server,浏览器/服务器结构)和基于Web服务两种模式&#xff0c;是一个适用于Internet环境下的模型结构。只要用户能连上Internet,便可以在任何时间、任何地点使用。系统工作原理图如图4-1所示&#xff1a; 图4-1系统工作原理…

【论文分享】基于多源大数据的高密度城市健康资源可达性与公平性评价

评估城市健康设施的可达性和公平性对于有效配置城市健康资源至关重要。本次我们给大家带来一篇SCI论文的全文翻译。该论文从新的视角定义和分类城市中的健康相关设施&#xff0c;考虑居民的主动和被动健康寻求行为&#xff0c;构建一个综合性框架来评估健康设施的邻近性、互补性…

Vue学习之路17----事件

可以自定义事件让子组件向父组件传值 1.使用emit 2.使用props 3.使用mitt 其实mitt和第一种方法类似&#xff0c;都用emitt事件&#xff0c;但是mitt不局限于父子之间通信&#xff0c;他可以在任意2个组件之间通信&#xff0c; 虽然需要安装&#xff0c;但mitt很小&#xff…