Embed PDF usingHTML5 with searchable text? or need plugin? - javascript

I want to embed a PDF on my webpage that has text I would like to be searchable. Using iframe method does not seem to work (when I click inside the window, ctrl F does not let me search for it.) What is the best way for me to embed the PDF (multiple pages) so that I can search text within the PDF? Can it be done with HTMl5? Or is there some library?
I've tried the techniques on this page:
https://pdfobject.com/static.html
I an unable to find and match the text with Ctrl+F when I open up the website in any webbrowser on any of the PDFs. The Ctrl+F appears to only work with HTML text. Please help!

is find() what you're looking for? Please read: this SO question
Edit
Mousetrap is a library that allow you to assign shortcuts, May be it's possible to search documents using Mousetrap you might want to try Mousetrap.js project site, github and this site has some examples and maybe it's possible to find text in documents or search documents for text. Please try and read their information..
End edit
You can't do a search in PDF files with html only, you will need other technologies however you can embed a lot of file types with <embed> and display them on your pages using object, embed or frames.. if you want to search text in PDF documents, it would be better to use a php extension that is able to help you out
I hope it's helpful to you

Related

How to hide/not display PDF title in the toolbar

Is there any way to access metadata of PDF file I embedded using pdfobject.js? I would like to replace/change its title because it's not corresponding to its filename. example is the snip below. filename of that is 'D1000SPN.pdf' which is different from the title displaying.
I tried to search but found none. However, since I can't find a solution to that. I decided to just not display the PDF title on its toolbar anymore or hide it.
I'm a newbie so please bare with me.
sample image
Check the section https://pdfobject.com/#the-why
Specifically, where it says "What PDFObject doesn't do".
In a nutshell:
"PDFObject does not provide the ability to customize the look and feel of the PDF toolbar."
Why?
"PDFObject is not a rendering engine. PDFObject just writes an element to the page, and relies on the browser or browser plugins to render the PDF."
It continues elaborating...
"If you really need to customize the toolbar, try forking Mozilla's PDF.js and customizing it to suit your needs."
But maybe there is hope...
"Some of these browsers provide the ability to show or hide the toolbar, or a feature such as the search field, via PDF Open Parmeters".
See the image below:
I tried it on Chrome and worked for me.
Good luck.

Is it possible to print an HTMLdocument with a generic (text only) printer?

I have an HTML document with tables and inline CSS to align text, specify width and font weight.
I tried to print the html document with a generic printer (Bixolon srp-275ii) and printed all data without any format.
I wonder if it's possible to print the document in HTML format with a JS/JQuery pluggin or do I need to convert it to PDF?
Im currently experimenting with Electron and trying to create a POS desktop app with silent printing to the receipts.
Any help is welcome!
After a quick Google search I saw https://www.npmjs.com/package/html-to-text which looks like it probably could do what you want and it is in Javascript :)
I have not actually tried it myself, but I hope it works well for you.
For HTML document, you can try using tray, instruction is in their Github wiki: https://github.com/qzind/tray/wiki/2.0-Pixel-Printing#html-printing, but note that this still required you to install an additional plugin to the computer

How to integrate a overlay help menu in my web page

I need to develop an answer box element as this in my website. Which technologies I am supposed to use to achieve this result.
It is called text editor. There are many plugin available for including text editor in your webpage.
I would suggest you to use CKEditor .
A simple search in google for html editor plugin
Edit: the link seems not to work:
http://A%20simple%20search%20in%20google%20for%20html%20editor%20plugin:%20%20https://www.google.de/search?client=ubuntu&hs=jLj&channel=fs&q=html%20editor%20plugin&oq=html%20editor%20plugin&gs_l=serp.3..0l7.3285.4205.0.4372.7.6.0.1.1.0.136.467.3j2.5.0....0...1c.1.64.serp..1.6.480...0i67.P3oo5nVtfp8

How do I build an 'embeddable widget'?

My webapp uses both Rails and JS and I would like users to be able to embed the images they upload to any blog/site.
What do I need to know, from a development point-of-view to allow me to create the functionality that generates an 'embed' link. It can be either a link like YouTube does, or a JS snippet or anything.
Just want to get a high-level overview of what I need to be able to do and how to proceed.
Thanks.
I would try using iframe. I created a widget which used javascript and I put it all into a single html file hosted on my website. Then I gave away an iframe snippet like this for example...
<iframe src="http://mywesbite.com/myWidget.html"></iframe>
The user can simply place the iframe snippet into their website and that's it!
I'm a little bit late to the party here, but I just wanted to add to Jacob's answer.
You can easily allow the user to customize the embedded content (perhaps choose light on dark vs. dark on light text to more closely match the page's environment/design) by using query params within the iframe src:
<iframe src="http://___.com/widget?theme=light&size=large"></iframe>
of course you'd probably want to build a UI to allow the user to make these distinct changes... you can't expect average user's to do that by hand:)
Vimeo's UI for customizing embedded videos is pretty nice if you want a best case scenario.

TinyMCE content/HTML filtering

I'll show you what I want to achieve.
I have some entities on my website(players, teams, articles, photos etc). I want to make some kind of BBcode that will create links to these elements. (I definitely don't want to use native link button for many reasons like changing url structure etc).
So I want to put into HTML code something like this:
[player=123ID]anchor text[/player]. After saving I will parse this HTML with my custom filter to make this linkable when showing on website in articles, private messages etc.
But my question is:
Is it possible to make custom TinyMCE editor button(one for each entity) that will open some kind of modal window where I'll add JS logic that will offer user some related autocompleter? And after selecting entity user wanted + writing anchor text it will put into HTML code my custom BBcode tag. Any guides, best practices, etc?
Is it possible to show in preview(not HTML) mode this custom BBtag as anchor? TinyMCE by default shows anchor tags like real anchors with anchor text, I want this custom tag to be shown(and editable) in the same way as regular anchors do. Do you have any ideas?
I am currently studying moxiecode wiki for some days, but I'm still not that in-depth in TinyMCE to solve this easily.
Will be happy for your inputs!
Regards,
Jim
To question 1: Yes this is possible. You might want to have a look at how to create a plugin for tinymce. It is not that difficult and you may create as many buttons as you need.
What "preview" mode are you reffering to?

Categories

Resources