Creating the view as PDF in sencha touch - extjs

My requirement is after user taps createPDF button,to generate current view as PDF. Using
console.log(this.getMain().getActiveItem().renderElement.dom.innerHTML);
i can able to get entire HTML element. Now i stuck to generate my view as PDF. Any suggestion

You should google pdf viewer.
For example, if you wanted to view the PDF at the URL http://research.google.com/archive/bigtable-osdi06.pdf ,
you would use the URL: http://docs.google.com/viewer?url=http%3A%2F%2Fresearch.google.com%2Farchive%2Fbigtable-osdi06.pdf
then use HTML object tag and pass the url to "data" attribute. Attached this as html in your view.
Thanks

You have two options if you are working in a browser, (if you are working in mobile devices you should working with inAppBrowser cordova plugin)
1º With the mozilla-pdf library: http://mozilla.github.io/pdf.js/
2º With the pdfObject library: http://pdfobject.com/instructions.php
Both libraries are very complete to work with the browser but the mobile devices are other mistake...

Related

URL link preview issue in react JS

We are having one problem while generating a link preview for our react application URL's. Actually we have the requirement to display the dynamic link preview for different URLs.
We are able to add the link preview by using open graph tags in our index.html file placed under the public folder.
But once we tried to add dynamic metadata using the "react-meta" or "helmet" package. it is successfully changing the title of the application. but links preview are not working after making these changes.
so I kindly let me know if there is any way that we can different link preview for different urls for react application. Thanks in advance.

How I do paginate with Pdfmake and html2canvas?

I created a html table using angularjs. I am able to download the document as pdf using pdfmake and html2canvas based on this question:
Generate PDF from HTML using pdfMake in Angularjs
The document layout is nice and everything works fine until it comes to documents that goes beyond a single page. In that case the pdfmake generates a blank (2 pages) pdf document.
How can I handle the generation of a multipage document with pdfmake and html2canvas?
I found the root cause of the problem. When the image generated by html2canvas is larger than one page it seems that pdfmaker is unable to handle the page split. So you have to managed output context by yourself.

Display ms word file in html using angular

How can I display Microsoft Word file in HTML page using either Angular or JavaScript. Please suggest any libraries which provide this functionality.
No browsers currently have the code necessary to render Word
Documents, and as far as I know, there are no client-side libraries
that currently exist for rendering them either
However, if you only need to display the Word Document, but don't need
to edit it, you can use Google Documents' Viewer via an to
display a remotely hosted .doc/.docx.
<iframe src="http://docs.google.com/gview?url=http://remote.url.tld/path/to/document.doc&embedded=true"></iframe>
Example:
jsfidle
However, if you'd rather have native support, in most, if not all browsers, I'd recommend resaving the .doc/.docx as a PDF file Those can also be independently rendered using PDF.js by Mozilla.
Edit:
Huge thanks to fatbotdesigns for posting the Microsoft Office 365 viewer in the comments.
<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=http://remote.url.tld/path/to/document.doc' width='1366px' height='623px' frameborder='0'>This is an embedded <a target='_blank' href='http://office.com'>Microsoft Office</a> document, powered by <a target='_blank' href='http://office.com/webapps'>Office Online</a>.</iframe>
Live Examples:
Google Docs Viewer
Microsoft Office Viewer
So what I found from my research is you can not display a word file using java script or angular, it only opens up a dialog box to download the file.
Here are some links backing my conclusion.
display doc file in HTML link1
display doc file in HTML link2
As an alternate what you can do is convert word file to HTML and preview it in browser. Mammoth.JS is the best option for this.

Twitter Widget Cordova Application Pop up

I am working on integrating twitter Widget in a tab of a Cordova application. I am using Cordova with Angularjs and ionic Framework.
I have obtained the API key needed in order to instantiate the widget and after a few attempts I got it. I attach one image (twitter in tab)
In order to do that, I create a tab, put the javascript in the main .html file and the link. So far, ok:
<a class="twitter-timeline" href="https://twitter.com/hashtag/mwc2015" data-widget-id="XXXXXXXXXXXXX"></a>;
But, the "show" begins when the user clicks on the twitter widget.
If you want to retweet, tweet something or whatever, twitter widget opens a new page, pop up, which is placed on top of cordova app, and then, user can not go back.
Device Back button doesn't work.
You can register and send a tweet, but always this new window is on top.
I attach an image to show what the user see in the screen when any button is clicked. twitter on top
So, you should kill Cordova app and start again.
I was wondering if someone knows how integrate the widget and the "children " pages of them , or if a javascript alternative to change target parameter of all links inside widget.js in order to open new windows inside the app.
Thank you so much.
I have experienced the same issue with Instagram, but I hope it can help as well. First of all, please install cordova InAppBrowser plugin.
cordova plugin add cordova-plugin-inappbrowser
Then try to modify your config.xml file with following, adding it before platforms tag:
<allow-navigation href="about:*" />

dnn - upload an image to portal and use it in html module?

how do i upload an image to the portal and use it in my html of my html module?
i have an html module i want to use and part of it is an image. how do i upload to my portal and then reference the url where it is on my server inside my html?
In case you didn't see my comments on the other one. One way is to just find the file on the hard drive and figure out the link manually in relation to your web root. But if you are using this as a portal system then this might not be the best solution.
There is also upload option right withing html editor. click on image manager icon and it will give you the option to upload an image.
alt text http://images.devs-on.net/Image/rw5tTdgNRgs22f1-MyWebsiteHomeAlp.png
alt text http://images.devs-on.net/Image/YjlGTN1GTUVMR1p-MyWebsiteHomeAlp.png
If your HTML is being put in the DNN HTML module, you could also use the media picker baked in.
If you want a more integrated option, you could use the DNN FileManager API to accomplish integrated uploading and retrieving of files. The DNNFilePickerUploader might come in handy for this, which will give you a DNN file ID which you could the use to get the image url.

Resources