Trying to view pdf file. Toolbar is showing differently in different browsers. Is there any way to hide this toolbar in all browsers.
Code in .cshtml file:
<div id="zoomOut">
<object data="#Url.Action("ViewFinalReport", new { Id = #ViewBag.FileName, SystemId = Model.SystemId, InspectionReportId = Model.ReportId })" type="application/pdf" width="900" height="650">
</object>
</div>
Code in controller:
public FilePathResult ViewFinalReport(string Id, int SystemId, int InspectionReportId)
{
string path = "";
string filePath = "";
string customerFolderName = "";
SystemInspectionReport SystemInspectionReport = new Models.Objects.SystemInspectionReport();
TestSoln.Models.Objects.SystemInspectionReports SystemInspectionReports = new Models.Objects.SystemInspectionReports(SystemInspectionReport, new BaseParams() { customerId = CustomerId, userId = UserId, timeOffSet = TimeOffSet });
string FileName = SystemInspectionReports.GetInspectionSystemReportFileName(SystemId, InspectionReportId, true);
DataTable dataTable = GetCustomerDetails(CustomerId).Tables[0];
if (dataTable.Rows[0]["Folder"] != DBNull.Value)
{
customerFolderName = dataTable.Rows[0]["Folder"].ToString();
}
path = HttpContext.Application["FileFolder"].ToString() + "\\" + customerFolderName + "\\InspectionReports\\" + SystemId + "\\" + InspectionReportId + "\\FinalReport\\" + FileName;
filePath = new AppSettings()[AppSettingsKey.FileLocation].Value + path;
return File(filePath, "application/pdf");
}
I can view the pdf in all the browsers. But the problem is that toolbar shown differently in different browsers. So I want to hide the toolbar. Any idea??
You can use embed instead of object and just add #toolbar=0 at the end of url to remove the toolbar. Not sure if the same applies to object.
<embed src="#Url.Action("ViewFinalReport", new { ...})#toolbar=0" width="500" height="375"> (Disable toolbar)
<embed src="#Url.Action("ViewFinalReport", new { ...}#toolbar=1" width="500" height="375"> (Enable toolbar)
EDIT:
Currently there is no easy configuration that can be done and works for all browsers.
The #toolbar and some other parameter setted after # are Adobe's proprietary "PDF Open Parameters". This works on Chrome because Chrome's PDF Viewer was made with compatibility with Acrobat's parameters.
So, if your user does not use Adobe reader extension, most users uses default browser configuration, this parameters may not work. As developers we have no control on what plugin/extension the user have configured on their browser to show PDF files.
An alternative is to use Mozilla's pdf.js library, that can render the pdf file inside a canvas. At this link you will find some live examples: https://mozilla.github.io/pdf.js/examples/
This a commom problem and you can find some questions on Stack Overflow and mozilla community about it:
How can I embed a PDF in a webpage without showing the Firefox PDF viewer toolbars?
Hiding the toolbars surrounding an embedded pdf?
Can I hide the Adobe floating toolbar when showing a PDF in browser?
Hide toolbar of pdf file opened inside iframe using firefox (This one has a good explanation too)
Hiding the toolbars surrounding an embedded pdf?
https://support.mozilla.org/nl/questions/1262019
https://support.mozilla.org/en-US/questions/1119523
Related
I would like to know if there is a way to create a link (Using HTML) to open an attachment embedded in the pdf document.
Something like this...
Open the attachment file or Open the attachment file
Any suggestion or recommendation?
Thanks
I have been able to implement this scenario after reading the next useful post
https://groups.google.com/forum/#!topic/flying-saucer-users/KuwPoTjaQYU
Steps:
Check out the next repository https://github.com/osnard/flyingsaucer
Analyse the file ITextOutputDevice.java, method processLink(RenderingContext c, Box box)
Make changes based on your needs
Build the project and use the jar file generated
Here the code to create an embedded file based on base64 content.
Java
...String doEmbedFile = handler.getAttributeValue( elem, "data-fs-embed-file" );
if ("true".equals(doEmbedFile.toLowerCase())) {
String fileName = new File(uri).getName();
String content = handler.getAttributeValue( elem, "content" );
com.lowagie.text.Rectangle targetArea = checkLinkArea(c, box);
if (targetArea == null) {
return;
}
try {
if (!_attachments.contains(fileName)) {
byte[] fileBytes = Base64.getDecoder().decode(content.getBytes("UTF-8"));
PdfFileSpecification fs = PdfFileSpecification.fileEmbedded(_writer, null, fileName, fileBytes);
fs.addDescription(fileName, true);
_writer.addFileAttachment(fs);
_attachments.add(fileName);
}
targetArea.setBorder(0);
targetArea.setBorderWidth(0);
//This only works on Adobe Acrobat Reader
PdfAction action = PdfAction.javaScript(
"this.exportDataObject({cName:\"" + fileName + "\", nLaunch:2});",
_writer
);...
HTML
<body><div id='div1'><p><a href='test.png' data-fs-embed-file='true' content='iVBORw0KGgoAAAANSUhEU...'>open test.png file</a></p></div><div id='div2'><p><a href='test.pdf' data-fs-embed-file='true' content='JVBERi0xLjUNCiW1tbW1D...'>open test.pdf file</a></p></div><div id='div3'><p><a href='test.txt' data-fs-embed-file='true' content='VEVFRUVFRUVFRVNUIFRYVA=='>open test.txt file</a></p></div></body>
*base64 content truncated
Output
Greetings and I hope it can help others
just open it on new tab, add attribute target="_blank" in your anchor tag
Open attachment
I've got a css file injected into my asp.net web form application page through a base page. The method I use look like the following:
private void InjectLocalStyleSheet()
{
if (this.Page.Header == null)
return;
Literal cssFile = new Literal()
{
Text =
#"<link rel=""stylesheet"" type=""text/css"" href=""" + Page.ResolveUrl("~/Common/Theme.css") +
#""" />"
};
Page.Header.Controls.Add(cssFile);
}
When I run the page in firefox, that css file gives me a 302 warning. Apparently, firefox view this file as html type while I've specified the type to be "text/css".
snap of request and response headers
I also run the web page in Chrome and get "Failed to load resouce: net::ERR_TOO_MANY_REDIRECTS"
Anyone has an idea about what is going on? Please help. Thank you.
I like to use JSFiddle when designing a new interface because I find it convenient for various tools within. I'm working on the front end of a site where I want to use a video, and unlike an image, I cant just throw it up on imgur and link to it for free instant hosting while I fiddle with the interface design.
So I want to know if I can somehow use a local file on my PC as the source for an HTML video element hosted on a live site. Obviously this is trivial to do with a web project being worked on on my Desktop, but I'm not sure it can be done on a live test.
For example this would work on a page I open from my desktop, living on my PC:
<video id="Video-Player">
<source src="../movie.mp4" type="video/mp4"/>
</video>
But I don't know whether I can do the equivalent with a page living on the web.
Here's how to allow a user to select an image from their local machine. This should get you started in the right direction.
Add a file input button in the HTML
<input type="file" id="file-btn"/>
and the corresponding handler
document.getElementById('file-btn').addEventListener('change', function(e){
readFiles(e.target.files);
})
Then the code to read the files
function readFiles(files){
files = [].slice.call(files); //turning files into a normal array
for (var file of files){
var reader = new FileReader();
reader.onload = createOnLoadHandler(file);
//there are also reader.onerror reader.onloadstart, reader.onprogress, and reader.onloadend handlers
reader.readAsDataURL(file);
}
}
Now, I've only done this with images, but this is how I read the image data.
function createOnLoadHandler(file){
console.log('reading ' + file.name + ' of type ' + file.type)
function onLoad(e){
var data = e.target.result
display(data);
}
return onLoad
}
function display(data){
var img = document.createElement('img');
img.src = data;
var context = canvas.getContext('2d')
context.clearRect(0, 0, WIDTH, HEIGHT);
context.drawImage(img, 0, 0, WIDTH, HEIGHT);
}
Here is a demo of the above code.
As a side note, if you try to read images from another domain you'll run into cross origin policy issues. I would think the same problem exists for videos as well.
I'm trying to download a dynamically generated file from the server using a hidden form.
Below is the angular function that I'm using to submit the hidden form
$scope.downloadCsv = function() {
var dataset = JSON.stringify($scope.dataset);
var body = $('body');
var reportParamJson = angular.toJson($scope.dataset);
var hiddenForm = "<form action='/Reports/SaveTestCsv' method='POST' target='_blank'><input type='hidden' name='dataset' value='" + dataset + "'/ ><button id='submitCSV' type='submit'></button></form>";
body.append(hiddenForm);
$('#submitCSV').click();
}
Below is the .net mvc method to generate the response with the file
[HttpPost]
public ActionResult SaveTestCsv(string dataset)
{
var data = JsonConvert.DeserializeObject<MyObject>(dataset);
var binary = getTestCSV(data);
var file = File(binary, "text/csv", "test.csv");
return file;
}
Below is the relevant html code from the partial html page that I'm including in the view using ng-include
<div>Download CSV</div>
<div ng-grid="gridOptions"></div>
.
When I click on "Download CSV", Chrome, FF and IE10 prompts me to save the file without refreshing the page/view, but on IE8/9, the page is refreshed, so the content from the ng-include tag is gone, in particular the html I posted above is no longer present.
I'm wondering if this has something to do with the hashbang in the url from IE8/9 and is there any way to fix this?
Edit
I ended up removing routing from angular completely and just use .net MVC to do the routing for me, and then it's working on IE8
I want to display a PDF file onto my JSF page, I have check this how to display a pdf document in jsf page in iFrame, but I dont want to display it on an iframe(since it will generate scroll bar). I just want to display the pdf onto a page like an image and able to give a width and height for it.
EDIT Hi BalusC. I still cant be able to display the pdf inline. Here is my code.
#WebServlet(name = "pdfHandler", urlPatterns = {"/pdfHandler/*"})
public class pdfHandler extends HttpServlet {
private static final int DEFAULT_BUFFER_SIZE = 10240;
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String requestedFile = request.getPathInfo();
File file = new File("/Users/KingdomHeart/Downloads/Test/pdf/" + requestedFile);
response.reset();
response.setContentType("application/pdf");
response.setBufferSize(DEFAULT_BUFFER_SIZE);
response.setHeader("Content-Length", String.valueOf(file.length()));
response.setHeader("Content-Disposition", "inline; filename=\"" + file.getName() + "\"");
BufferedInputStream input = null;
BufferedOutputStream output = null;
try{
input = new BufferedInputStream(new FileInputStream(file), DEFAULT_BUFFER_SIZE);
output = new BufferedOutputStream(response.getOutputStream(), DEFAULT_BUFFER_SIZE);
byte[] buffer = new byte[DEFAULT_BUFFER_SIZE];
int length;
while((length = input.read(buffer)) > 0){
output.write(buffer, 0, length);
}
}finally{
output.close();
input.close();
}
}
...
}
It still prompt me to download the pdf file. The pdf file that get downloaded to my computer is the correct pdf file btw. Can u spot anything wrong?
There's not really another way (expect from HTML <object> tag which would have the same "problems"), but you can just give the <iframe> a fixed size and disable the scrolling as follows:
<iframe src="foo.pdf" width="600" height="400" scrolling="no"></iframe>
If you also want to hide the (default) border, add frameBorder="0" as well.
You should take a look at ICEpdf, it creates an image on the server side, gives zooming, and other controls (demo).
Try going into Adobe Reader, and under the Options dialog there are web settings where you can indicate that you always want PDF type documents to open within the browser.
This is unfortunately a client side fix and doesn't take into account other PDF readers.
What you want is impossible. Browsers are not magic, they just display different kinds of documents, some of which (HTML) can embed objects provided by plugins (flash, java) and other documents inside iframes (pdf, flash, html). If you want to show pdf miniatures, you will have to generate images on the server.