We have an application built on GWT framework where we want to display a PDF file without any browser plugin and are currently evaluating PDF.js to do that.
The problem is, no matter what I do, I am not able to render a PDF file onto a canvas in our GWT application. Do give some background
The PDF file ticket is retrieved from server.
The PDF.js file ticket is retrieved from server and is embedded in the HTML body by using this script
var head= document.getElementsByTagName('body')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.setAttribute('charset', 'UTF-8');
script.src=url;
head.appendChild(script);
Canvas element is created in the View (using googles MVP pattern here) and a JSNI call is made to the script which embeds the PDF.js in the HTML body using the above function. The script then makes a call to function which works with PDFJS class defined in PDF.js file.
The function to render the PDF file on canvas is as below :
PDFJS.disableWorker = true;
PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf)
{
pdf.getPage(1).then(function getPageHelloWorld(page)
{
var scale = 1.25;
var viewport = page.getViewport(scale);
canvas.height = viewport.height;
canvas.width = viewport.width;
page.render({canvasContext: context, viewport: viewport});
page.startRendering(context);
alert("Finished rendering");
});
});
The canvas and context are created in the View class and passed to the javascript.
The problem here is, after the call to JSNI is made, I show alerts of all variables. The browser shows alerts except when I make a call alert(PDFJS). This shows that PDFJS variable is not being recognised in the script.
This makes me think PDF.js file is not correctly embedded in the view or there is something else that I am missing.
Note: I have downloaded most of the examples over the net and most of them work locally i.e. I can modify the PDF.js file path to pick up a local copy and the HTML still renders the PDF. It has no problem reading the PDFJS variable. Its only in this GWT application that I see these problems.
Does anyone have any clue whats happening. Your help will be highly appreciated.
Thanks
Your problem is that you're injecting the script so it aloads asynchronously, but you don't wait until after it's loaded to start using it.
Try using ScriptInjector.FromUrl to inject the script and put the rest of your code in the Callback's onSuccess.
Injecting the script synchronously (by adding it to your HTML host page, or GWT Module descriptor —note: won't work with the xsiframe linker—), as proposed by Ilya is of course also a solution.
Try to add <script src="PDF.js"/> in your .gwt.xml file and put PDF.js file in your public director
Related
I have already worked using Sails.js. But in that project we used it simply as an API. We had backbone on a client side.
In the new application I am planning to use Sails from bottom to top, and I have some things I do not fully comprehend.
I have views that use templates (EJS). In my controller I can call a view and pass it a model to render. That I understand. What I am dont fully understand is where do I put javascript files for a client in this scenario?
For example, lets assume that I have a view that has a input box and a button. I would want to have some javascript that controls that button and input (validation or whatever). Lets assume I put that code for input box and button in a validation.js:
1. In what location do I put that file? Assets?
2. How do I include that file to be sent to client for execution? Do I include it in a template.ejs using normal < script > tags?
All the client assets should be placed into the assets folder.
All the includes are automatically binded by Grunt (when lifting the server) into the layout.ejs file, if you've put your css files into the assets/styles folder and your js files into the assets/js folder.
My users need to download a file when hitting a certain controller in my Play application. I thought this would do the trick:
def downloadFile = Action {
Ok.sendFile(new File("example.zip"))
}
But it seems to only give the actual content of the file instead of downloading the file. Could anybody tell me what I'm doing wrong?
Thanks
Try this instead:
def index = Action {
Ok.sendFile(
content = new java.io.File("/tmp/fileToServe.pdf"),
fileName = _ => "termsOfService.pdf"
)
}
Its from the documentation itself.
Now you don’t have to specify a file name since the web browser will
not try to download it, but will just display the file content in the
web browser window. This is useful for content types supported
natively by the web browser, such as text, HTML or images.
See this: https://www.playframework.com/documentation/2.0/ScalaStream
Turns out the REST client we are using is automatically converting the file straight into its content instead of letting us download the file. Hitting it from a normal browser works as intended.
Hi I am new on moovweb and I got stuck on a requirement to apply transformation logic on ajax response which is coming in a json format containing html, which I have to add on my page.
A sample response
{
"success":true,
"html" :"<div>This can be a big html data</div>"
}
SO basically, I need to apply transformation on that html string. I gone through docs but I did't got anything to handle this kind of scenario.
Is there any way to do it?
If I understand your question correctly then there are several steps that you need to take in order to solve this issue.
Open your Moovweb project using Google Chrome, right click your mouse and choose Inspect Element which will open your Chrome Dev Tools.
Choose the Network Tab at the top of your Chrome Dev Tools which will be the second tab from the left.
Trigger the ajax call on your site and you will see under the Network Tab the response URL of the ajax call. Most of the time it will be in a format like www.yoursite.com/ajax/rest_of_url
Once you have found the ajax response URL then open your main.ts file in your tritium script and insert the following code if your response URL is similar to the format provided above:
match($path){
with(/ajax/){ #or wherever the site files for the ajax response are contained
log("--> importing ajax.ts")
#import ajax.ts
}
}
Now created a file in for your tritium code called ajax.ts. The file will be in the same location as your html.ts and main.ts files. With the code applied above to your main.ts, every time a URL is called that contains /ajax/ then the ajax.ts file will be applied.
Now you can open your new ajax.ts file that you created and start applying your tritium functions to transform the json format containing html to way you need it.
Greetings,
I'm looking for a way to launch a GWT module when a user clicks on an XML file and have the module consume the xml data. Ideally I would like to render the XML in a rich manner and would prefer to use GWT controls instead of having to lay it out by hand via xslt + javascript.
I'm supposing one way would be to point the xml to a well known xslt that creates a simple html page that forces a redirect to the gwt module but how would I transfer the xml data to said module to allow for enhanced formatting?
Another way would be to have the process that produces the xml also include the bootstrap gwt module but it would be creating multiple bootstrap instances over time and pollute the user's directory.
The use case is that a user would run this app on their local machine which outputs an XML file. If they try and view the xml file in a browser, I'd like to have the GWT module take over and present the data accordingly. I would rather they not have to go to a page and upload the data manually.
Appreciate any ideas on the matter.
TIA
If it's something that runs on the user's machine, I would recommend to ship an executable, or generate a parallel HTML file to present the data. JavaScript run from file:/// will not be able to acces the filesystem.
I have loaded a PDF into UIWebView. Now i want to search for strings in that pdf. So I used a string which contains JS steps(used to highlight that specific string) and evaluated it with the webView object like this. But no result was obtained .It was as if nothing had been done.
Dont the JS evaluation work on a pdf loaded into a webView? Is there anyother way to search for a string in a PDF loaded into webView?
Even if you could evaluate JS against a webview that is currently displaying a pdf, the pdf render has no exposed or documented APIs. If you have code that works on HTML then it is not working because the PDF is not exposing an HTML like dom. If you have code that works in the acrobat plugin on a desktop then it won't work because the phone uses a derivative of Apple's Webkit PDF plugin which does not export the same API as Acrobat (as far as I know it exports no API, and if it does it is undocumented). In any event, regardless of why you think your code should work, it won't.
If you want to find a string in a pdf you are going to need to write code to parse the PDF and find that string, and even then you will not be able to highlight the specific string in the webview based renderer.
If you want this sort of functionality you should should use Quartz to directly render your PDFs onto views. Apple provides documentation for how to do that.