C#结合html2canvas切割图片并导出到PDF_C#

需求

html2canvas 是一个 javascript 库，它可以把任意一个网页中的元素（包括整个网页）绘制到指定的 canvas 中，适用于生成网截图或将指定元素容器内容保存为图像等。现有需求如下：

1、c#后台输出html片段内容到客户端；

2、引入 html2canvas 库，放置 canvas 对象，操作客户端功能保存 canvas 内容生成图像 base64数据；

3、回传 base64 数据，c# 生成图像

4、c# 对于生成的长图进行切割，生成多张图片

5、将多张图片导出生成到pdf文件。

开发运行环境

操作系统： windows server 2019 datacenter

.net版本： .netframework4.7.2

js库：html2canvas 1.3.2 版本库

数据库：ms sql server 2016

开发工具：vs2019 c#

实现

生成html范例片断

我们假设有存储过程（ccdn_gettabledetail），通过传递表名参数（@tablename nvarchar(50)），可以获取表的详细信息，包括（表名、表说明、字段序号、字段名、字段说明、标识、主键、类型、长度、占用字节数、小数位数、允许空、默认值），代码如下：

create procedure ccdn_gettabledetail 
  @tablename nvarchar(50)
as
begin
    -- set nocount on added to prevent extra result sets from
    -- interfering with select statements.
    set nocount on;
select
    表名=convert(nvarchar(50),case when a.colorder=1 then d.name else '' end),
    表说明=convert(nvarchar(50),case when a.colorder=1 then isnull(f.value,'') else '' end),
    字段序号=convert(nvarchar(50),a.colorder),
    字段名=convert(nvarchar(50),a.name),
    字段说明=convert(nvarchar(50),isnull(g.[value],'')),
    标识=convert(nvarchar(50),case when columnproperty(a.id,a.name,'isidentity')=1 then '√'else '' end),
    主键=convert(nvarchar(50),case when exists(select 1 from sysobjects where xtype='pk' and name in (
      select name from sysindexes where indid in(
       select indid from sysindexkeys where id = a.id and colid=a.colid
       ))) then '√' else '' end),
    类型=convert(nvarchar(50),b.name),
    长度=convert(nvarchar(50),columnproperty(a.id,a.name,'precision')),
    占用字节数=convert(nvarchar(50),a.length),
    小数位数=convert(nvarchar(50),isnull(columnproperty(a.id,a.name,'scale'),0)),
    允许空=convert(nvarchar(50),case when a.isnullable=1 then 'null'else 'not null' end),
    默认值=convert(nvarchar(50),isnull(e.text,''))
    from syscolumns a
    left join systypes b on a.xtype=b.xusertype
    inner join sysobjects d on a.id=d.id and d.xtype='u' and d.name<>'dtproperties'
    left join syscomments e on a.cdefault=e.id
    left join sys.extended_properties g on a.id=g.major_id and a.colid=g.minor_id
    left join sys.extended_properties f on d.id=f.major_id and f.minor_id =0
    where d.name=@tablename
    order by a.id,a.colorder
end

运行效果如下图：

现我们通过 dataset 获取数据集数据，并绑定显示在 datagrid 控件（q_dbgrid）上。如何获取数据集信息可参考《c# 利用idbdataadapter / idatareader 实现通用数据集获取》。

绑定示例代码如下：

        object rv2 = getdataset(sql, paras,commandtype.storedprocedure);
        dataset ds = (dataset)rv2;
        datatable dt = ds.tables[0];
        q_dbgrid.allowpaging = true;
        q_dbgrid.pagerstyle.visible = false;
        q_dbgrid.pagesize = 1000;
 
        q_dbgrid.datasource = ds;
        q_dbgrid.databind();

html元素转base64

在页面上放置 canvas 画布控件（mycanvas）和临时存放base64数据的 textbox 控件（ds），首先需要引用 html2canvas js库，如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>

客户端示例代码如下：

<script language="javascript" type="text/javascript">
 
window.onload = function () {
    var canvas = document.getelementbyid("mycanvas")
 
 
    html2canvas(document.getelementbyid("q_dbgrid")).then(canvas => {
    document.getelementbyid("mycanvas").appendchild(canvas); // 将生成的canvas添加到页面上
    var image = canvas.todataurl("image/jpeg");
    document.getelementbyid("ds").value = image;
 
  });
 
}
</script>

通过 html2canvas 方法生成 jpeg类型的图像数据（canvas.todataurl("image/jpeg")）并存储在 ds 控件里。

base64转图片

base64stringtoimage方法说明如下表：

序号	参数名	类型	说明
1	strbase64	string	base64数据
2	outputfilename	string	输出的图像文件全路径

实现代码如下：

public bool base64stringtoimage(string strbase64, string outputfilename)
{
 
       byte[] arr = convert.frombase64string(strbase64);
       memorystream ms = new memorystream(arr);
       system.drawing.image img = system.drawing.image.fromstream(ms);
       img.save(outputfilename);
       img.dispose();
       if (file.exists(outputfilename))
       {
           return true;
       }
 
       return false;
}

切割长图片

为保证较好的显示效果，可能需要对长图片进行切割，生成多个图像文件，并存到指定的目录里，以备后续导出生成pdf文件使用。示例代码如下：

string outjpgpath = "d:\\testpdf\\";
string filename="d:\\test.jpg";
string base64data = ds.text.trim().replace("data:image/jpeg;base64,", "");
base64stringtoimage(base64data, filename);
 
system.drawing.bitmap sbitmap = new system.drawing.bitmap(filename);
int out_width = sbitmap.width;
int ref_height = 1000; int com_height = sbitmap.height;
int hcount =sbitmap.height<ref_height?1:sbitmap.height % ref_height==0?sbitmap.height/ref_height:sbitmap.height/ref_height+1;
int out_top = 0;
int out_height = ref_height;
        
for (int i = 1; i <= hcount; i++)
{
     if (i == 1) { out_top = 0; } else { out_top = ref_height * (i - 1) + 1; }
     out_height = com_height < ref_height ? system.math.abs(com_height)-1 : ref_height;
     com_height -= ref_height;
     system.drawing.bitmap dbitmap = sbitmap.clone(new system.drawing.rectanglef(0, out_top, sbitmap.width, out_height), system.drawing.imaging.pixelformat.format24bpprgb);
     string f = "test" + ("0000" + i.tostring()).padleft(4) + ".jpg";
     dbitmap.save(outjpgpath + f);
     dbitmap.dispose();
}
sbitmap.dispose();

outjpgpath为输出的多图片目录，filename 为生成的长图的地址。

ref_height为自定义的切割高度，根据指定切割高底生成若干“子”图片。