从字节数组在 Xamarin App 中显示 PDF [英] Show PDF in Xamarin App from byte array
问题描述
我正在使用 Xamarin Forms 创建一个移动应用程序，用户可以在其中查看已完成的考试结果.考试结果来自字节数组格式的数据库，我需要以某种方式将字节数组转换为 PDF 并将其显示给用户.我看到我可以使用 WebView 来显示 PDF，但需要将它保存到设备然后显示它.有谁知道如何将字节数组转换为 PDF 并将其显示在 WebView 中，而无需保存或以其他方式执行?
I am creating a mobile application with Xamarin Forms where the user can view the result of exams done. The result of the exams comes from a database in a byte array format and I need to somehow convert the byte array into a PDF and display it to the user. I saw that I can use a WebView to display a PDF, but would need to save it to the device and then display it. Would anyone know how I can convert the byte array to PDF and display it in a WebView without having to save it or do it otherwise?
提前致谢.
推荐答案
使用 pdf.js 使它变得非常简单:https://mozilla.github.io/pdf.js/
Using pdf.js makes it really easy: https://mozilla.github.io/pdf.js/
向您的表单页面添加一个
WebView并设置依赖代码以获取每个平台的 baseurl 路径
Add a
WebViewto your Forms' Page and setup the dependency code to obtain the baseurl path per platform
将 pdf.js 和 pdf.worker.js 添加到您的应用程序项目(BundleResource for iOS 和 AndroidAsset for Android)
Add the pdf.js and pdf.worker.js to your application projects (BundleResource for iOS and AndroidAsset for Android)
将您的 PDF 流转换为 Base64 字符串(如果需要，通过 MemoryStream)并将该字符串嵌入到基于 HTML 的字符串中.
Convert your PDF stream to a Base64-string (via a MemoryStream if needed) and embed that string into a HTML-based string.
使用 JavaScript (atob) 解码该 base64 字符串并设置 pdf.js/pdf.worker.js 以呈现为code>canvas` 在你的 html 中定义.
Use JavaScript (atob) to decode that base64 string and setup pdf.js /pdf.worker.jsto render to acanvas` defined in your html.
示例:
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，在那里替换您的流......
Code-behind:
Note: Using a PDF via bundled resource, substitute your stream there....
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
};
这篇关于从字节数组在 Xamarin App 中显示 PDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
