在 Xamarin App 中从字节数组显示 PDF答案

【问题标题】：Show PDF in Xamarin App from byte array在 Xamarin App 中从字节数组显示 PDF
【发布时间】：2018-07-20 15:36:00
【问题描述】：

我正在使用 Xamarin Forms 创建一个移动应用程序，用户可以在其中查看已完成的考试结果。考试结果来自字节数组格式的数据库，我需要以某种方式将字节数组转换为 PDF 并将其显示给用户。我看到我可以使用 WebView 显示 PDF，但需要将其保存到设备然后显示。有谁知道我如何将字节数组转换为 PDF 并将其显示在 WebView 中而无需保存或以其他方式执行？

提前致谢。

【问题讨论】：

嘿，非常感谢您的回答，但我仍在努力实现这一点。他的答案是目前最有希望的答案。

标签： arrays pdf xamarin xamarin.forms stream

【解决方案1】：

使用pdf.js 非常简单：https://mozilla.github.io/pdf.js/

将WebView 添加到您的表单页面并设置依赖代码以获得每个平台的 baseurl 路径
- https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/webview?tabs=vswin
将pdf.js 和pdf.worker.js 添加到您的应用程序项目中（BundleResource 用于 iOS，AndroidAsset 用于 Android）
将您的 PDF 流转换为 Base64 字符串（如果需要，通过 MemoryStream）并将该字符串嵌入到基于 HTML 的字符串中。
使用 JavaScript (atob) 解码 base64 字符串并设置您的 html 中定义的 pdf.js /pdf.worker.jsto render to acanvas`。

示例：

XAML：

<StackLayout x:Name="webViewContainer" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
    <WebView x:Name="webView" BindingContext="{x:Reference webViewContainer}" WidthRequest="{Binding Width}" HeightRequest="{Binding Height}"/>
</StackLayout>

代码隐藏：

注意：通过捆绑资源使用 PDF，在此处替换您的流......

            var baseUrl = DependencyService.Get<IBaseUrl>().Get();
            string base64Pdf;
            using (var stream = await FileSystem.OpenAppPackageFileAsync("Dank Learning 1806.04510.pdf"))
            using (var memoryStream = new MemoryStream())
            {
                await stream.CopyToAsync(memoryStream);
                base64Pdf = Convert.ToBase64String(memoryStream.ToArray());
            }
            var html = @"
<html>
<head> 
<script type=""text/javascript"" src=""pdf.js""></script>
 <script type=""text/javascript"">
    window.onload=function(){
var pdfData = atob('SUSHIHANGOVER');
var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdf.worker.js';
var loadingTask = pdfjsLib.getDocument({data: pdfData});
loadingTask.promise.then(function(pdf) {
  console.log('PDF loaded');
  var pageNumber = 1;
  pdf.getPage(pageNumber).then(function(page) {
    console.log('Page loaded');
    var scale = 1.5;
    var viewport = page.getViewport(scale);
    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    var renderTask = page.render(renderContext);
    renderTask.then(function () {
      console.log('Page rendered');
    });
  });
}, function (reason) {
  console.error(reason);
});
    }
</script>
</head>
<body>
<h1>StackOverflow / Base64 PDF</h1>
<canvas id=""the-canvas"" style=""border: 1px solid""></canvas>
<h2>by SushiHangover</h2>
</body>
</html>
";
            html = html.Replace("SUSHIHANGOVER", base64Pdf);
            webView.Source = new HtmlWebViewSource
            {
                BaseUrl = baseUrl,
                Html = html
            };

【讨论】：