随心所欲导出你的 UI 界面到 PDF 文件

使用 C1PDF 控件可以导出文件到 PDF 文件,结合 .NET 平台特性你可以在任何客户端生成自定义报表。你可以打印任何 UI 界面,例如 DataGrid 导出到 PDF。 在本篇文章中我们将阐述在 XAML 平台中打印 UI 到 PDF 文件的通用方法。打印 UI 界面到 PDF 文件,需要首先把 UI 界面导出到图片,然后把图片添加到 PDF 文件中。面让我们来进入实战部分。

发布于 2014/04/30 00:00

ComponentOne Enterprise

使用 C1PDF 控件可以导出文件到 PDF 文件,结合 .NET 平台特性你可以在任何客户端生成自定义报表。你可以打印任何 UI 界面,例如 DataGrid 导出到 PDF。 在本篇文章中我们将阐述在 XAML 平台中打印 UI 到 PDF 文件的通用方法。

打印 UI 界面到 PDF 文件,需要首先把 UI 界面导出到图片,然后把图片添加到 PDF 文件中。面让我们来进入实战部分。

导出UI到图片

UI导出到 PDF 文件,最简单明了的方法是把 UI 界面作为图片插入到 PDF 文件中。每个平台都支持把 UI 界面保存为图片的接口。所以我们可以利用这些接口来获取需要的图片。接下来使用 C1PDF 控件,通过几行简单的代码导出到 PDF。

Silverlight 平台下我们使用 WriteableBitmap 类来渲染 UI 到图片。通过 Render 方法即可生成图片。这种方法不仅可以渲染某个控件,同时可以创建整个页面。只需要把根节点赋值给构造函数即可。

// render element to image (Silverlight)
var img = new WriteableBitmap(element, null);

 

WPF 平台下我们可以使用RenderTargetBitmap 类来渲染UI到图片。代码如下:

// render element to image (WPF)
RenderTargetBitmap rtbmp = new RenderTargetBitmap(width, height, 96, 96, PixelFormats.Default);
rtbmp.Render(element);

 

需要注意的是  WinRT 平台,使用的方法相同,但参数不同,代码如下:

// render element to image (WinRT)
var renderTargetBitmap = new RenderTargetBitmap();
await renderTargetBitmap.RenderAsync(element);

 

好了,上面我们介绍了 XAML 平台的导出图片方法,接下来我们就可以把图片插入到 PDF 文件了。

导出 UI 到 PDF 文件(WPF 和 Silverlight)

以下代码创建了 C1PdfDocument 对象,绘制UI元素生成的图片到PDF文件,保存到 PDF 文件。

// get stream to save to
var dlg = new SaveFileDialog();
dlg.DefaultExt = ".pdf";
var dr = dlg.ShowDialog();
if (!dr.HasValue || !dr.Value)
{
    return;
}
  
// create document
var pdf = new C1PdfDocument(PaperKind.Letter);
pdf.Clear();
  
var img = new WriteableBitmap(CreateBitmap(content));
// if Silverlight, use below instead
// var img = new WriteableBitmap(content, null);
  
pdf.DrawImage(img, pdf.PageRectangle, ContentAlignment.TopLeft, Stretch.None);
  
// save document
using (var stream = dlg.OpenFile())
{
    pdf.Save(stream);
}
MessageBox.Show(dlg.SafeFileName + " saved successfully!");

 

生成图片的方法如下:

public BitmapSource CreateBitmap(FrameworkElement element)
{
    int width = (int)Math.Ceiling(element.ActualWidth);
    int height = (int)Math.Ceiling(element.ActualHeight);
  
    width = width == 0 ? 1 : width;
    height = height == 0 ? 1 : height;
  
    // render element to image (WPF)
    RenderTargetBitmap rtbmp = new RenderTargetBitmap(width, height, 96, 96, PixelFormats.Default);
    rtbmp.Render(element);
    return rtbmp;
}

 

导出 UI 到 PDF 文件 (WinRT)

因为它涉及到C1Pdf的代码是相同的,无论你使用何种平台。但由于对WPF和Silverlight 和 WinRT  平台的差异,在其中呈现的图像,并将其保存到用户的计算机上的代码是完全不同的。下面是一些渲染UI内容为PDF格式在Windows Store应用程序(WinRT的XAML)中的代码:

FileSavePicker savePicker = new FileSavePicker();
savePicker.SuggestedStartLocation = PickerLocationId.DocumentsLibrary;
savePicker.FileTypeChoices.Add("PDF (*.pdf)", new List(new string[] { ".pdf" }));
savePicker.DefaultFileExtension = ".pdf";
StorageFile file = await savePicker.PickSaveFileAsync();
if(file != null)
{
    // create document
    var pdf = new C1PdfDocument(PaperKind.Letter);
    pdf.Clear();
  
    // set document info
    var di = pdf.DocumentInfo;
    di.Author = "ComponentOne";
    di.Subject = "C1.Xaml.Pdf demo.";
    di.Title = "Export UI to PDF";
  
    // create a bitmap from the UI element
    var img = await CreateBitmap(panel);
  
    // draw bitmap to PDF
    pdf.DrawImage(img, pdf.PageRectangle, ContentAlignment.TopLeft, Stretch.None);
  
    // save PDF file
    await pdf.SaveAsync(file);
  
    // notify user it's saved
    MessageDialog dialog = new MessageDialog("File saved!");
    await dialog.ShowAsync();
}

 

我们准备了三个平台的 Demo 供你体验效果:

 

 

 

C1PDF 控件下载链接:

/developer/componentone-enterprise

ComponentOne Enterprise | 下载试用

ComponentOne 是一套专注于企业 .NET开发、支持 .NET Core 平台,并完美集成于 Visual Studio 的第三方控件集,包含 300 多种 .NET开发控件,提供表格数据管理、数据可视化、报表和文档、日程安排、输入和编辑、导航和布局、系统提升工具等七大功能,被誉为“.NET开发的‘瑞士军刀’”。

ComponentOne 为您提供专业的产品咨询服务,并由技术支持工程师为您1对1解答。>> 发帖提问

相关产品
推荐相关案例
关注微信
葡萄城社区二维码

关注“葡萄城社区”

加微信获取技术资讯

加微信获取技术资讯

想了解更多信息,请联系我们, 随时掌握技术资源和产品动态