According to Mozilla's pdfjs plugin, I can view my pdfs by passing a query param to viewer.html as shown below:
http://localhost/MyProject/viewer.html/?file=file.pdf
This is working fine. But I have some different kind of requirement. The requirement in my project is that I need to have tabs like feature on a single page. Each tab holds a pdf file.
So, I am thinking to make all the code in the viewer.js to a big function. So that I can use it as constructor to render each pdf file. Something like this:
var firstPdf = new paintPdf({file: 'myfile.pdf'});
Anyway, I decided to do the above changes later when I am able to integrate pdfjs's viewer functionality successfully in my project.
Summary of my project:
Single page application
All templates are being maintained in a single file within an Object of name - templates
To do so, first of all, I copied all the html inside of the body tag of viewer.html and appended as new property to the templates object. and then I copied all necessary and dependency files from the example to my project's folder and loaded them dynamically. The files which I included are:
pdf.js
pdf.worker.js
viewer.js
l10n.js
viewer.css - I am not loading this file dynamically.
After loading of files, I am rendering the viewer.html's template using lodash. Still, I can't able to see the rendered pdf in my project. I suspect this might be because everything is happening dynamically. (but I am not sure because everything is being rendered in sequence as it should be)
Btw, I have added the default pdf with name compressed.tracemonkey-pldi-09.pdf adjacent to index.html file. What could I be missing?
Firefox and chrome doesn't throw any error.
Note: I might be doing in wrong way. Suggesting me to solve in right directions would be appreciable.
Some important points while modifying viewer.js.
It is recommended to build your own viewer.js instead of modifying the available viewer.js file which is actually just for demo purpose.
You can create your own viewer.js file by visiting each js files available here.
If you have only small things to modify in the existing demo viewer.js, then
Mention the exact path for pdf.worker.js file inside your viewer.js.
This file will start rendering pdf on DomContentLoaded event. If you are planning to render the pdf file dynamically later, then you should comment this event register and call the following function whenever necessary.
webViewerLoad();
I hope this will help someone.
Related
I have implemented PDFjs in my ASP.NET MVC application. The steps which I have followed.
Created an action that works as Pdf Viewer by copying the code provided by PDFjs as WebViewer.html.
On this page, I properly provided paths to all the static resources that are required by this HTML page.
Now the only problem is the path of pdf.worker.js. When I run the application, I get an error that this file not found. Even after lots of efforts, I am not able to fix this issue. Can anybody tell me that where I need to make a change in the code so that I can specify a custom path to this file?
As per code, I can say that this js file is internally referenced by pdf.js. But pdf.js file seems to be generated by WebPack and updating pdf.worker.js path in this file not affecting anything.
This is how pdf.js code looks like:
Using the PDF.js default viewer, the application options are in the viewer.js file. While I don't have a complete understanding of exactly how it works, it seems the viewer layer passes configuration values to the pdf.js display layer as necessary.
In version 2.0+, you can change the hard-coded value for workerSrc, which looks like this by default:
workerSrc: {
value: '../build/pdf.worker.js',
kind: OptionKind.WORKER
}
I couldn't figure out a way to dynamically set this in 2.0.
In the newly pre-released 2.1, thanks to this pull request, you can use the custom webviewerloaded event to more easily set viewer options. For example,
document.addEventListener('webviewerloaded', function () {
document.PDFViewerApplicationOptions.set('workerSrc', '/your/path/here/pdf.worker.js');
});
I have two Nativescript XML view files, one named test.xml and another named test-rtl.xml. I would like these views to share the same code behind file, for example test.js. Is this possible some how? I have heard in dev channels of the Page class containing a codeFile property but have not been able to find this property any where.
The answer by #dashman is the option you have.
Each page will have it's own page files(page.js, page.xml, page-view-model.js) What you can do is have both pages share the same model.js file. Create a shared folder and place the file in it. Just require it on the page you need it and bind it to the context and you are good to go.
You can find and example here: https://firebase.googleblog.com/2016/01/getting-started-with-nativescript-and_53.html
The user-view-model.js was used by both the login page and register page.
Each file will have it's own page file...but what you can do is have both pages connect to the same context file. Then you can build the bulk of the page logic in that file. From the xml file, you can callback directly into the model file (e.g. tap="{{ tapEvent }}").
I understand this might just be impossible but when you're making JS available for easier debugging in devtools via the helpful //# sourceURL comment, I'd also like to map it to its respective local file, for easy editing.
Clarification on #// sourceURL=dynamicScript.js:
Note: Notice the "//# sourceURL=dynamicScript.js" line at the end of dynamicScript.js file. This technique gives a name to a script created with eval, and will be discussed in more detail in the Source Maps section. Breakpoints can be set in dynamic JavaScript only if it has a user supplied name.
The sourced file now exists in Sources under "no-domain", and is unable to map to my workspace's dynamicScript.js file.
You can map your local web app directory to a server path, so that you can live edit the JS file that evaluates some code, but there is no way to map the dynamically generated named script to a file on the system as far as I'm aware.
If you use eval to execute code from a string, adding //# sourceURL=dynamicScript.js' simply tells Chrome to simulate that script being an actual file, so that you can debug etc. The file doesn't actually exist, it's in memory. The dynamic 'file' cannot appear as part of a local workspace because it simply doesn't exist on the system.
In the code we use something like this:
$('#wrapper').html('//app/views/content.ejs', {foo:"bar"});
And when we build the app, this still stays the same, although the content.ejs file is built into production.js.
So my question is, what should we do so that when we build the app, these references point to ejs files inside of production.js?
We are using JMVC 3.2.2
We've also tried using this way:
$('#wrapper').html( $.View('//app/views/content.ejs', {foo:"bar"}) );
Your views are not getting added to production.js; you need to steal each one of them:
steal('//app/views/content.ejs');
JMVC 3.1:
steal.views('//app/views/content.ejs');
Got the answer in JMVC forum: https://forum.javascriptmvc.com/topic/#Topic/32525000000958049
Credit to: Curtis Cummings
Answer:
The paths to the views do not need to change.
When the production.js file is created, your views are included and
get preloaded when the script runs. When you reference:
'//app/views/content.ejs', view first checks if the view file you are
requesting has been preloaded and if it has, will use that instead of
making a request for the .ejs file.
I'd like to split my views in Grails into 2 files a .gsp file and a .js file so that I get a cleaner Javascript separation from my views. So here's an example:
views/index.gsp
views/index.js
views/home/index.jsp
views/home/index.js
But when I simply add the index.js script reference like this:
<script src="index.js" type="text/javascript"></script>
all I get is a 404.
Does anyone knows how to deal with this?
A great benefit would be to have the ability to use view data inside the index.js file to produce the desired content.
Matthias.
Actually, it should be perfectly possible to serve a JS file (or any other file type) as a GSP from your grails-app/views/ directory. The only thing you have to do, is define a suitable URL mapping for those GSPs, e.g.:
"/javascript/home/index"(view:'/home/index.js')
With this URL mapping, you can put your JS code into grails-app/views/home/index.js.gsp (note the trailing .gsp) and you can use any grails tags in your JS source. To ensure that your JS is delivered with the correct content type, you may want to place
<%# page contentType="text/javascript"%>
at the beginning of your GSP.
Unfortunately, the createLink tag doesn't support link rewriting to views, but it should be easy to write your own tag to create those links.
Anyways, keep in mind that this won't have a very positive impact on your app's performance. It's usually better to have static JS files (and also serve them as static resources) while passing dynamic stuff as parameters to JS functions for example. This will also keep you from some headaches wrt. caching etc.
The idea is good, but Grails has this directory structure for a reason. The view folder is intended for a certain artifact type (views)..
You could clone your view folder structure under web-inf, but that gives you more work as I guess the idea behind this is to keep related files close together for convenience reasons.
Even though I'm not to excited about storing Javascript together with the view I loved Robert's idea of hooking into the build process by using build events to copy javascript sources into the right directory! If you decide to go down that road you might as well compress the sources while you're at it. ShrinkSafe is popular library.
I don't think you are allowed to access js inside views/
if you need to do that ... here is the trick
create your js and rename it with myjs.gsp (use "")
iniside _myjs.gsp type you js
... write down you js in here ...
inside you gsp (for example: index.gsp, view.gsp, etc)
type this tag to upload you js
Update 2:
Grails offer the possibility of hooking into the build lifecycle using custom events.
An event handler can be written which synchronises all JavaScript files under grails-app/views with the target folder of web-app/js.
Place the custom code in $PROJECT/scripts/Events.groovy. The PackagingEnd is a good target for the invocation, since it happens right after web.xml is generated.
eventPackagingEnd = { ->
// for each js file under grails-app/views move to web-app/js
}
Update
If you'd like the JavaScript files simply 'meshed' together, you can do that using symlinks, e.g.:
grails-app/views/view1/index.js -> webapp/js/view1/index.js
As far as I know, there is no way of forcing grails to directly serve content which is outside of web-app.
Alternatively, you can inline your JavaScript, but that can have performance implications.
JavaScript files belong under web-app/js.
Then you can reference them using <g:javascript src="index.js" />.