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)

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).md

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)

1. copy the 'web' and 'build' folders from https://github.com/mozilla/pdfjs-dist under your application's assets folder.
2. Get/Create your `Blob() object

this.http.get(url, { responseType: ResponseContentType.Blob }).map(
(res) => {
  return new Blob([res.blob()], { type: fileType });
});

3. 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);

4. 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
}

5. 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")
}