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

发布时间:2014/04/30 00:04 发布者:iceman

返回博客中心

使用 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


关于葡萄城

赋能开发者!葡萄城是专业的集开发工具、商业智能解决方案、低代码开发平台于一身的软件和服务提供商,为超过 75% 的全球财富 500 强企业提供服务。葡萄城专注控件软件领域30年,希望通过模块化的开发控件、灵活的低代码应用开发平台等一系列开发工具、解决方案和服务,帮助开发者快速响应复杂多变的业务需求,最大程度地发挥开发者的才智和潜能,让开发者的 IT 人生更从容更美好。

了解详情,请访问葡萄城官网