How to add pdf.js and viewer.html to angular 2 application.(With Optional aspnet core/webapi/mvc backend report generation using MS Local RDLC report viewer)
- copy the 'web' and 'build' folders from https://github.com/mozilla/pdfjs-dist under your application's assets folder.
- Get/Create your `Blob() object
this.http.get(url, { responseType: ResponseContentType.Blob }).map(
(res) => {
return new Blob([res.blob()], { type: fileType });
});
- Create url using blob and supply to viewer.html
// myBlob object is created over http call response. See item 2.
const fileUrl = URL.createObjectURL(myBlobObject);
let myFileName = "sample";
var viewerUrl = `assets/pdfjs/web/viewer.html?file=${encodeURIComponent(fileUrl)}&fileName=${sample}.pdf`;
window.open(viewerUrl);
- Additions: The download file name is not honored by viewerJs, also since we have a
Blob object
, content-disposition is not honored as well.
So I changed getPDFFileNameFromUrl(url)
inside viewer.js
// A new func to get urls params
function getUrlParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
function getPDFFileNameFromURL(url) {
// .... Code is omitted for Brevity
// Modifications done to provide download file name along with url. This is not originally part of mozilla's viewerJs implementation - Start
var providedFileName = getUrlParameterByName('fileName');
if (providedFileName) {
return providedFileName;
}
// Modifications done to provide download file name along with url. This is not originally part of mozilla's viewerJs implementation - End
// .... Code is omitted for Brevity
}
- This item is optional. Instead of microsoft rdlc local report, you can use any other reportviewer, or simply returning a pdf as byte array would do the trick. At the end of the day, your api should return a byte array, that can be read by the client side javascript/typescript.
[HttpGet]
[Route("MyReport")]
public IActionResult GetReport()
{
// var reportObjectList1
// var reportObjectList2
var reportViewer = new ReportViewer {ProcessingMode = ProcessingMode.Local};
reportViewer.LocalReport.ReportPath = "Reports/MyReport.rdlc";
reportViewer.LocalReport.DataSources.Add(new ReportDataSource("NameOfDataSource1", reportObjectList1));
reportViewer.LocalReport.DataSources.Add(new ReportDataSource("NameOfDataSource2", reportObjectList1));
Warning[] warnings;
string[] streamids;
string mimeType;
string encoding;
string extension;
var bytes = reportViewer.LocalReport.Render("application/pdf", null, out mimeType, out encoding, out extension, out streamids, out warnings);
// The below content-disposition is lost when we create Blob() object in client browser. Hence commented out
//var cd = new System.Net.Mime.ContentDisposition
//{
// FileName = "somepdf.pdf",
// Inline = true
//};
//Response.Headers.Add("Content-Disposition", cd.ToString());
return File(bytes, "application/pdf")
}