js中点击按钮将html页面导出成图片

Posted 2023-05-07

一、添加引用
在解决方案上单击右键，选择“Add Reference...”，添加“System.Windows.Forms”，添加完后，Web.Config 中应该有类似下面的内容：
<system.web>
<compilation debug="true">
<assemblies>
<add assembly="System.Windows.Forms, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>
二、 设置 STA 模式
在 @ Page 指令中加上 AspCompat="true"，以强制该网页在 STA（单线程单元） 模式下执行。结果类似如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" AspCompat="true" %>
三、写截图代码
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.htmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Drawing;
using System.Drawing.Imaging;
using System.Windows.Forms;

public partial class _Default : System.Web.UI.Page

private WebBrowser _webBrowser;

protected void Page_Load(object sender, EventArgs e)

string url = Request.QueryString["url"];
if (string.IsNullOrEmpty(url))

url = "http://www.cftea.com/";


_webBrowser = new WebBrowser();
_webBrowser.ScrollBarsEnabled = false; //不显示滚动条
_webBrowser.Navigate(url);
_webBrowser.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(Completed);

while (_webBrowser.ReadyState != WebBrowserReadyState.Complete)

System.Windows.Forms.Application.DoEvents(); //避免假死，若去掉则可能无法触发 DocumentCompleted 事件。



public void Completed(object sender, WebBrowserDocumentCompletedEventArgs e)

//设置浏览器宽度、高度为文档宽度、高度，以便截取整个网页。
_webBrowser.Width = _webBrowser.Document.Body.ScrollRectangle.Width;
_webBrowser.Height = _webBrowser.Document.Body.ScrollRectangle.Height;
using (Bitmap bmp = new Bitmap(_webBrowser.Width, _webBrowser.Height))

_webBrowser.DrawToBitmap(bmp, new Rectangle(0, 0, bmp.Width, bmp.Height));
bmp.Save("C:\\Capture.png", ImageFormat.Png);


参考技术A 你可以试试html2canvas这个插件，js将页面生成图片

如何像用户单击一样单击 HTML 按钮

【中文标题】如何像用户单击一样单击 HTML 按钮

【英文标题】：How to do click the HTML button as if the user is clicking

【发布时间】：2020-08-19 16:21:30

【问题描述】：

我按照URL 使用下载按钮将 Chart.js 图表导出到图像，它可以工作。这是图像结果：

如果我点击保存按钮，图片将下载到我的电脑中。

我的问题是：

有没有什么方法或者脚本可以让图片下载到服务器自己的文件夹中，就好像有用户点击了保存按钮一样？例如每天一次，脚本将通过按下按钮下载图像并将图像保存到服务器文件夹。

请赐教。

【参考方案1】：

您提供的链接使用 saveas 函数中的 blob 保存图像。因此，您可以做的是使用 ajax 调用将相同的 blob 发送到服务器。 参考这个链接： How can javascript upload a blob?

【讨论】：

谢谢。你的回答启发了我。

如果我的回答对你有帮助，那就太好了.....如果你觉得我的回答有用，你可以点赞。