页面上的内容的生成图片后,保存为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.rhkb.cn/news/465145.html

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

相关文章

STM32——ADC

目录 1、ADC的介绍 2、ADC主要特征 3、ADC结构与引脚 4、ADC配置流程 5、示例&#xff08;光敏电阻的ADC采样&#xff09; 6、提示 7、结语&#xff1a; 1、ADC的介绍 12位ADC是一种逐次逼近型模拟数字转换器。它有多达18个通道&#xff0c;可测量16个外部和2个内部 信号…

Node.js——fs模块-同步与异步

本文的分享到此结束&#xff0c;欢迎大家评论区一同讨论学习&#xff0c;下一篇继续分享Node.js的fs模块文件追加写入的学习。

Python | Leetcode Python题解之第528题按权重随机选择

题目&#xff1a; 题解&#xff1a; class Solution:def __init__(self, w: List[int]):self.pre list(accumulate(w))self.total sum(w)def pickIndex(self) -> int:x random.randint(1, self.total)return bisect_left(self.pre, x)

道品科技的水肥一体化智能灌溉:开启现代农业的创新征程

水肥一体化智能灌溉作为一种现代农业技术&#xff0c;其通过对水分与养分供应的有效整合&#xff0c;致力于营造作物的最佳生长环境。此项技术的核心要义在于凭借智能化系统精准把控灌溉与施肥的流程&#xff0c;进而提升水资源的利用效率&#xff0c;降低肥料的浪费程度&#…

GitHub个人主页美化

效果展示 展示为静态效果&#xff0c;动态效果请查看我的GitHub页面 创建GitHub仓库 创建与GitHub用户名相同的仓库&#xff0c;当仓库名与用户名相同时&#xff0c;此仓库会被视作特殊仓库&#xff0c;其README.md&#xff08;自述文件&#xff09;会展示在GitHub个人主页…

QT5串口多线程--派生类加moveToThread

QT5串口多线程--派生类加moveToThread Chapter1 QT5串口多线程--派生类加moveToThread前言新建工程源码serialobject.hserialobject.cppmanager.hmanager.cppwidget.hwidget.cpp 测试 Chapter2 QT在PC开发中多串口通信有哪些方法方法实现方案一&#xff1a;需要注意的是&#x…

框架学习01-Spring

一、Spring框架概述 Spring是一个开源的轻量级Java开发框架&#xff0c;它的主要目的是为了简化企业级应用程序的开发。它提供了一系列的功能&#xff0c;包括控制反转&#xff08;IOC&#xff09;、注入&#xff08;DI&#xff09;、面向切面编程&#xff08;AOP&#xff09;…

十年码农的编程心得分享

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

【网络安全】|nessus使用

1、扫描结果分析&#xff1a; Sev&#xff1a;漏洞的严重性级别 CVSS&#xff1a;量化漏洞严重性的标准&#xff0c;通过计算得出一个分数&#xff0c;分数越高表示漏洞越严重。 VPR&#xff1a;基于风险的评分系统&#xff0c;帮助组织优先处理风险最高的漏洞。 EPSS&#xf…

为什么越来越多人开始用云电脑?网友道出了真相

近期&#xff0c;3A游戏大作《黑神话&#xff1a;悟空》的横空出世&#xff0c;成功激起大多数人对国产游戏的兴趣。然而&#xff0c;没有一台高配置的电脑&#xff0c;就无法在《黑神话&#xff1a;悟空》中获得震撼的游戏体验。想要配齐处理器、显卡、内存等硬件&#xff0c;…

W6100-EVB-Pico2评估板介绍

目录 1 简介 2 硬件资源 2.1 硬件规格 2.2 引脚定义 2.3 工作条件 3 参考资料 3.1 RP2350 数据表 3.2 W6100 数据表 3.3 原理图 原理图 & 物料清单 & Gerber 文件 3.3 尺寸图&#xff08;尺寸&#xff1a;mm&#xff09; 3.4 参考例程 认证 CE FCC 4 硬…

VUE2升级成VUE3的优化与区别

大家好&#xff0c;我是小编阿贤。欢迎各位大神关注《全栈技术圈》&#xff0c;让技术更加简单易懂。 1. vue2和vue3实例区别 1.1 创建一个vue2实例 在vue2里面的Vue是一个构造函数&#xff0c;通过该构造函数创建一个Vue实例&#xff0c;data选项可以是对象&#xff0c;也可以…

ProLightsfx新的出发–从CSDN到WordPress

原文链接&#xff1a;ProLightsfx新的出发--从CSDN到WordPress_ProLightsfx的技术分享 &#xff08;https://www.prolightsfxjh.com/article/article-new-start/&#xff09; 大概有差不多2年时间没有在csdn发布文章了。可能主要是最近几年工作有些疲惫、精神有些懈怠&#xff…

「Mac畅玩鸿蒙与硬件19」鸿蒙UI组件篇9 - 自定义动画实现

自定义动画让开发者可以设计更加个性化和复杂的动画效果&#xff0c;适合表现独特的界面元素。鸿蒙提供了丰富的工具&#xff0c;支持通过自定义路径和时间控制来创建复杂的动画运动。本篇将带你学习如何通过自定义动画实现更多样化的效果。 关键词 自定义动画动画路径贝塞尔曲…

GPIO子系统中Controller驱动源码分析

往期内容 本专栏往期内容&#xff1a; Pinctrl子系统和其主要结构体引入Pinctrl子系统pinctrl_desc结构体进一步介绍Pinctrl子系统中client端设备树相关数据结构介绍和解析inctrl子系统中Pincontroller构造过程驱动分析&#xff1a;imx_pinctrl_soc_info结构体Pinctrl子系统中c…

【Linux系统编程】第四十二弹---多线程编程全攻略:涵盖线程创建、异常处理、用途、进程对比及线程控制

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】 目录 1、线程创建 2、线程异常 3、线程用途 4、进程 VS 线程 5、线程控制 5.1、创建和等待线程 1、线程创建 线程能看到进程的大…

Qt入门基础分享

文章目录 学习 Qt 语言之前的基本知识1. 编程基础语法:面向对象编程(OOP):基本数据结构:了解数组、链表、栈、队列、树(如二叉树、平衡树)、图(如邻接矩阵、邻接表)等。算法:熟悉常见的排序算法(如快速排序、归并排序、冒泡排序)和查找算法(如线性查找、二分查找)…

超萌!HTMLCSS:超萌卡通熊猫头

效果演示 创建了一个卡通风格的熊猫头 HTML <div class"box"><div class"head"><div class"head-copy"></div><div class"ears-left"></div><div class"ears-right"></di…

使用 AMD GPU 的 ChatGLM-6B 双语语言模型

Using the ChatGLM-6B bilingual language model with AMD GPUs — ROCm Blogs 2024 年 4 月 4 日&#xff0c;作者&#xff1a; Phillip Dang. ChatGLM-6B 是一个开源的中英双语语言模型&#xff0c;拥有 62 亿参数。它基于通用语言模型 (GLM) 架构&#xff0c;针对中文对话进…

计算并联电阻的阻值

计算并联电阻的阻值 C语言代码C代码Java代码Python代码 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 对于阻值为r1和r2的电阻&#xff0c;其并联电阻阻值公式计算如下&#xff1a; R1/(1/r11/r2) 输入 两个电阻阻抗大小&#xff0c;浮…