I'm using PDF.js to view pdf's. I'm able to open pdf in new browser window.
But now I want to open pdf inside div container/tag which will be created on the fly. Sample code below:
var newTabContent = '<div id="'+tabId+'" class="tab_content" style="display: block;"></div>';
$('#dynamicTabContent').append(newTabContent);
$('#pageContent').hide();
$("#"+tabId).show();
$("#"+tabId).html(msg);
$dynamicTabContent(viewerUrl);
viewerUrl = viewer.html?file + encodeURIComponent(base64_string);
This is not working. Fails with "pdfViewer is null" error.
Related
I know it's possible to display a Google Sheet as HTML using the spreadsheet ID and GID, i.e.:
https://docs.google.com/spreadsheets/d/SPREADSHEET_ID/gviz/tq?tqx=out:html&tq&gid=GID
But in order to view that, you have to know the URL of the sheet. What I'm wondering is whether it's possible to display this HTML version of the sheet but without revealing the URL of the sheet?
Manually
To retrieve a Spreadsheet in HTML format you can export it accordingly by clicking on File -> Download -> Web Page. That will get you a zip file with the HTML of your Spreadsheet that you can rename as you like without revealing the Spreadsheet ID.
With Apps Script
You can also automate this process creating an Apps Script function that for instance gets triggered every time you click on an inserted button (to do this you can simply click on the menu bar Insert -> Drawing and the on the three dots of the top right of this button click on assign script and set it to the name of your function).
The following function will display a modal dialog on the Spreadsheet when run that if the user clicks on Download it will automatically download the zip file with the Spreadsheet in HMTL format. This function has self explanatory comments :
function downloadHTML() {
// Get ID of the Spreadsheet
var id = SpreadsheetApp.getActive().getId();
// Get the download URL of this Spreadshet in format HTML on the background
var url = "https://docs.google.com/a/mydomain.org/spreadsheets/d/" + id + "/export?exportFormat=zip&access_token=" + ScriptApp.getOAuthToken();
// Download when clicked on the button of the opened dialog
var html = '<input type="button" value="Download" onClick="location.href=\'' + url + '\'" >';
// create an HTML output from the given string
var dialog = HtmlService.createHtmlOutput(html);
// Show a modal dialog on the Spreadsheet UI when the function is run with the Title download
SpreadsheetApp.getUi().showModalDialog(dialog, "Download");
}
Reference
createHTMLOutput
showModalDialog
I am using media picker property editor in template to display image. The problem is that I can't see image on page but I can see alt tag. Additionally, I can see values in debugging.
#{
var teamGroupPhoto = Model.Content.GetPropertyValue<IPublishedContent>("teamGroupPhoto");
if (teamGroupPhoto != null)
{
<img class="img-responsive" src="#teamGroupPhoto.Url" alt="Groupphoto"/>
}
}
Screenshot of code in VS:
when I browse link of image in media folder in Umbraco backoffice i get IIS error:
I am stuck at last point of my application, i am supposed to display user form in PDF which works fine on desktop browsers as they has pdf viewer built in, but for Android / iOS its not working as pdf viewer is missing.
So i was trying to use PDF.js to display it, (to be honest, this is very widely used but documentation is lacking), only catch is i am getting data in base64 format. PDF.js has example on site which shows how to render the base64 data but its not PDF, for that displaying PDF as "PDF" i need to user their "viewer.html" but that does not take base64 data?
closest i have come to Pdf.js: rendering a pdf file using base64... on stack overflow, but i dont know how to use it after PDFJS.getDocument(pdfAsArray)?.
Other link that came across was other link
I dont want to rely on Google / Third party PDF viewer as i dont know how long they will support this.
There are no end-to-end answers on this topic in community so here is my attempt to put something here. (maybe it will help others)
Okay, PDF.js is one way of showing PDF in browser, specially when you don't want to rely on PDF plugin to be installed. In my case, my application generates report in PDF and that can be viewed before downloading but on handheld devices it was not working because of missing PDF viewer plugin.
In my case PDF was sent to browse in base64 string, that I can use to display PDF with <object src="base64-data"...></object>. This works like charm on Chrome / FF but switch to mobile view and it stops working.
<object type="application/pdf" id="pdfbin" width="100%" height="100%" title="Report.pdf">
<p class="text-center">Looks like there is no PDF viewer plugin installed, try one of the below approach...</p>
</object>
In above code it will try to show the PDF or fall back to <p> and show error message. And I Was planning to add the PDF viewer at this point, PDF.js was the choice but was not able to display it. One example on PDF.js with Base64 data shows how to do this but that renders it as an Image not PDF, and I was not able to find solution for that and hence the question, here is what I did,
First add the JavaScript code to convert base64 to array
convert to blob and use viewer.html file packaged with PDF.js to display it as PDF
In case if you are wondering why base64 data, then answer is simple I can create the PDF, read it, send the data to client and delete the file, I don't have to run any cleaner service/cron job to delete generated PDF files
Few Things To Note
Below code is using Flask + Jinja2, change the way base64 is read in html if you are using something else
viewer.html needs to be changed to have required js & css files in proper location (by default their location is relative; you need them to be referred from static folder)
viewer.js looks for pdf.worker.js in predefined location, change that in case its throwing error as above file not found.
viewer.js might throw file origin does not match viewer error in that case as a quick fix comment the code which throws this error and see if that solves the issue (look for that error in viewer.js)
I am not the author of below code, I have just put it together from different places.
Now to the code (so PDF will be displayed when user clicks on button with id="open_id")
Jquery
var pdfDataX = '{{ base64Pdf }}';
var BASE64_MARKER = ';base64,';
PDFJS.workerSrc = "{{ url_for('static', filename='js/pdf.worker.js') }}";
$('#open_id').click(function() {
PDFJS.disableWorker = true;
var pdfAsDataUri = "data:application/pdf;base64," + pdfDataX ;
PDFJS.workerSrc = "{{ url_for('static', filename='js/pdf.worker.js') }}";
// Try to show in the viewer.html
var blob = base64toBlob(pdfDataX, 'application/pdf');
var url = URL.createObjectURL(blob);
var viewerUrl = "{{ url_for('static', filename='viewer.html') }}" + '?file=' + encodeURIComponent(url);
$('#pdfViewer').attr('src', viewerUrl);
// Finish
var mdObj = $('#pdfbin');
mdObj.hide();
mdObj.attr('data', pdfAsDataUri);
mdObj.show();
$('#myModal').modal();
});
var base64toBlob = function(b64Data, contentType, sliceSize) {
contentType = contentType || '';
sliceSize = sliceSize || 512;
var byteCharacters = atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i=0; i<slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays, {type: contentType});
return blob;
}
$('.save').click(function(e) {
e.preventDefault();
var blob = base64toBlob(pdfDataX, 'application/pdf');
saveAs(blob, 'abcd.pdf'); // requires https://github.com/eligrey/FileSaver.js/
return false;
});
HTML
<object type="application/pdf" id="pdfbin" width="100%" height="100%" title="Resume.pdf">
<p class="text-center">Looks like there is no PDF viewer plugin installed, try one of the below approach...</p>
<iframe id="pdfViewer" style="width: 100%; height: 100%;" allowfullscreen="" webkitallowfullscreen=""></iframe>
</object>
Hope this will be useful for others in future.
I'm using following code to print specific portion of a page. It works fine in Firefox but not working in Google Chrome and IE. In print.css I'm making some portion to display none.
controller
- community
Themes
- css
--- print.css
var prtContent = document.getElementById('detailleft');
var WinPrint = window.open('', '', 'letf=10,top=10,width=600",height="250",toolbar=1,scrollbars=1,status=0');
WinPrint.document.write("<html><head><LINK rel=\"stylesheet\" type\"text/css\" href=\"/../../Themes/css/print.css\" media=\"print\"><LINK rel=\"stylesheet\" type\"text/css\" href=\"/../../Themes/css/print.css\" media=\"screen\"></head><body>");
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.write("</body></html>");
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
I'm using the object tag to render PDF in HTML, but I'm doing it in MVC like this:
<object data="/JDLCustomer/GetPDFData?projID=<%=ViewData["ProjectID"]%>&folder=<%=ViewData["Folder"] %>"
type="application/pdf" width="960" height="900">
</object>
and Controller/Action is
public void GetPDFData(string projID, Project_Thin.Folders folder)
{
Highmark.BLL.Models.Project proj = GetProject(projID);
List<File> ff = proj.GetFiles(folder, false);
if (ff != null && ff.Count > 0 && ff.Where(p => p.FileExtension == "pdf").Count() > 0)
{
ff = ff.Where(p => p.FileExtension == "pdf").ToList();
Response.ClearHeaders();
Highmark.BLL.PDF.JDLCustomerPDF pdfObj = new JDLCustomerPDF(ff, proj.SimpleDbID);
byte[] bArr = pdfObj.GetPDF(Response.OutputStream);
pdfObj = null;
Response.ContentType = "application/" + System.IO.Path.GetExtension("TakeOffPlans").Replace(".", "");
Response.AddHeader("Content-disposition", "attachment; filename=\"TakeOffPlans\"");
Response.BinaryWrite(bArr);
Response.Flush();
}
}
The problem is, as I'm downloading data first from server and then return the byte data, it is taking some time in downloading, so I want to show some kind of progress to show processing.
Please help me on this.
You may try the following (not tested under all browsers):
<div style="background: transparent url(progress.gif) no-repeat">
<object
data="<%= Url.Action("GetPDFData, new { projID = ViewData["ProjectID"], folder = ViewData["Folder"] }") %>"
type="application/pdf"
width="640"
height="480">
<param value="transparent" name="wmode"/>
</object>
</div>
Unfortunatly, there is no way (afaik) to interact with the Acrobat plugin and see when it's ready to display your PDF document.
There are components available that replace Acrobat and provide a proper Javascript interface.
I work for TallComponents on their PDFWebViewer.NET product which will display PDF without any plugins and works with ASP.NET MVC.
You do have some other options though. If you need the progress indicator because the PDF generation is taking longer than you would like you can poll the server for progress using AJAX calls.
On the server you would need to have some sort of progress information available that you can return as the result of the ajax call. In the browser you'd use the result to provide progress info to the user. There are several good examples available online (this blog for example). There are also other questions here on SO (for example here) with good pointers to more info.
If the generation process only takes a couple of seconds can you probably get way with showing a busy indicator. That could be as simple as showing a div in your page when you trigger the download from the server.
By the way, if I'm not mistaken you should replace the attachment keyword with inline in the Content-Disposition header. Setting that to attachment will cause the entire PDF to be downloaded before any content is displayed. If you set it to inline, Acrobat will start showing the first page as soon as it has downloaded enough data to do so.