将HTML页面内容转为图片并下载及浏览器打印功能

大鱼伊诺

于 2021-08-10 18:25:11 发布

阅读量1.5k

点赞数 3

文章标签： javascript js html canvas

本文链接：https://blog.csdn.net/weixin_46203797/article/details/119575210

版权

本文介绍了如何使用html2canvas和dom-to-image这两个工具，实现网页内容的抓取并转换为图片，供打印或下载。重点对比了两者在实践中的优劣，并提供了相应的代码示例，适合前端开发者进行考试网站开发需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近公司在做一个考试的网站，而需求是准考证展示后可以打印，也可以转为图片并下载，打印调用浏览器的打印功能即可，转为图片我第一时间想到了html2canvas，不过还是在网上多翻了翻，看看有没有其他便捷的方法，最后记录了两种简单实用的方法。

一、html2canvas

1.1 安装插件

npm install --save html2canvas

yarn add html2canvas

1.2 导入模块（ES6）

import html2canvas from 'html2canvas';

1.3 转换为图片并下载

 	const dom = document.getElementById('targetDom');
    if(dom !== null) {
   
      html2canvas(dom, {
    scale: window.devicePixelRatio }).then((canvas) => {
   
        const dataURL = canvas.toDataURL('image/png');
        if

最低0.47元/天解锁文章