I'am trying to copy a whole html page, but the css and images & javascript files are external, if there were only few of them I could copy them manually, but what if there are many of them....the links in the html pages to those files refers as local, is there a way I can copy all of the files exactly as they are in the html page? is there a tool for that? cause I can't do it in the chrome console
You can save a website in the MHTML format (short for MIME Encapsulation of Aggregate HTML Documents) which is an HTML document along its assets like styles or images in one single document.
Some browsers do support that format (e.g. Chrome “Save complete website”), for other clients you'
ll need to install a plugin.
See: https://en.wikipedia.org/wiki/MHTML
Related
Is there a 'native' way to include your own HTML, CSS and Javascript page in an Antora generated site?
Including an HTML file in the Asciidoc source with inline CSS styling works for only HTML and CSS like this (see the attached image for the result):
++++
include::partial$test.html[]
++++
However, if you were to separate the CSS out and add Javascript then the .css and .js files do not get published since they are not directly included anywhere and the included HTML follows the styling defined by the UI bundle.
Manually copying the CSS and Javascript files to the right place in the build files works as expected (the Antora page is styled and runs the .js as expected)
I would think most Antora documentation is the product of some CI/CD pipeline so you could probably add the CSS and Javascript to the build files as part of the pipeline but that is a messy solution.
What is really required is a way to force Antora to publish some 'extra' files or folders.
I get that the whole point of Antora is to make consistently styled and formatted documentation. The reason for wanting to do this is to include interactive graphs generated by Plotly or Bokeh in the documentation.
It also opens up the possibility of including any kind of interactive window, such as a button to play music. In my case I want to have an 'interactive chord book' that plays and highlights the notes in music chords.
Inline Styling on Antora Site
Your sample pass-through block works because the included file is inserted into the content flow at that position. The test.html file is not, itself, published, but its contents exist within the file using the include macro.
Similarly, if you used this partial block:
++++
include::partial$test.js[]
++++
The contents of test.js are injected into the content flow at that point. test.js itself doesn't need to be published if you are simply embedding a few lines of code.
If you do need test.js to be published, you have three choices:
Store test.js in the module's attachments folder (instead of partials. The partials folder is intended to contain "small" Asciidoc documents that are used multiple times). You'd need to include::attachment$test.js[], but that file does get copied to the build folder.
Use supplemental_files: https://docs.antora.org/antora/latest/playbook/ui-supplemental-files/
Supplemental files allow you to customize the assets in the UI.
Fork the UI and add your customizations directly.
The latter two approaches would be preferable. Currently, Antora only publishes HTML. In the future, publishing to other output formats may occur, including to PDF. PDFs won't work well with embedded HTML, CSS, or JavaScript, so the UI customization is the preferred approach. (PDF generation will likely have a distinct theme support, similar to asciidoctor-pdf).
I frequently use Sharepoint 2010 content editors to display Custom HTML. Within my HTML files I also link to external CSS and Javascript files. All of these files are stored in document libraries, organized by folders. Each folder contains a single HTML, CSS and JS file.
When I edit these files, I use offline copies saved on my desktop and then I upload them to SharePoint and overwrite the previous version.
The issue I have is in relation to the src path in the HTML file for the CSS and JS files. When I edit them offline I only use the filename since they are stored in the same folder on my desktop. When I upload them to SharePoint, the path no longer works even though the CSS and JS is in the same folder. The only way I have been able to make it work is to change the path to the full path to each CSS and JS file, ie. "https://SharePointSite.com/Full_Path_to_JS_and_Css".
I would like reference a path to the file on sharepoint without having to use the full path.
Any assistance with be greatly appreciated, Thank you
Take the full path and replace the directories with /../. You might have to do this a bunch of times, sharepoint can be pretty deep.
So
https://SharePointSite.com/dir1/dira/Full_Path_to_JS_and_Css".
would become
../../../Full_Path_to_JS_and_Css".
I'm working on an application that needs to download the source of a web page from a link, with all the internal files, like images, css, javascript.
After, I will need to open this html in a webview, in offline mode, that's why I need to download everything from the page.
I'd download the images using JSOUP, but I haven't ideia how to link them into the downloaded html.
Could you give me some examples, or starting points where to look to start?
Thanks in advance
Essentially, what you'll need to do (and what my app mentioned below does) is go over all the references links to additional additional assets / images / scripts and so on, download them, and then change the HTML document to point to the local downloaded copy. Something like this, with Jsoup:
Find all the img elements on the page,
Get the location / url of the image file from the src attribute of the img elements (with .attr("abs:src:)),
Download all of those images to a local directory
Change each of the image elements src attribute values to point to the location of the downloaded image file, relative to where the main HTML file will be stored, eg with .attr("src", "assets/imagefilename.png"").
Do this for all other assets required by the page, eg. images, CSS, scripts, html5 video, and others. I also did some regex on the CSS (both linked and inline) to extract, download, and rewrite things like background image references and in the css. Webpages also have other linked things like favicons or RSS feeds which you might want too.
Save your Jsoup document (with the modified URLs pointing to your downloaded versions of the assets) to file, by calling .toString() on it and saving the result to a file.
You can then open the local HTML file in webview, and, assuming you have done everything right, it will show with all images and assets, even offline.
I actually wrote an Android app which does exactly this: save a complete HTML file and all of the CSS / images / other assets to a local file / directory, using Jsoup.
See https://github.com/JonasCz/SaveForOffline/ for the source, specifically SaveService.java for the actual HTML page saving / downloading code.
Beware that it's GPL licensed, so you have to comply with the GPL license if you use (parts of) it.
Also beware that it does a lot of things, and is quite messy as a result, (there's also no comments or documentation either...) but it may help you.
You can do it with Jsoup. IMO, it's a lot of work. On the other, you can consider Crawler4j.
There is a tutorial on their website. Have look to the example for crawling images.
I need to convert a website page with all of it's external stylesheets to a single html with inline css (not for email use but to include styled portions of that page into another website's page), I've found so far CssToInlineStyles wich does most of the job very well, but I still have to merge all stylesheets into one file and then pass it to that class.
scrapbook for firefox seems fine, only drawback : no contol over changing urls of resources (images in html or in css) it make a whole snapshot of the webpage available offline with no overrides
I have a bunch of files(not necessarily text files) on disk. I need to display the merged contents of all these files in a html page opened locally on Load. Is this possible without using Active-X? My objective is to create a summary of a set of files and at the same time to keep the summary file small. Infact most of the files whose data I need to summarize are html files.
If this is possible can I also choose only certain sections of text in each file to be part of the summary?
It would be great if the solution would have a wide browser support.
Any example would help a lot.
Thanks.
Open the files in iframes then pull the source of each and process it. Since it is coming from your own machine, there should not be any cross-domain problem.
Javascript does not have access to the clients file system, therefore I do not believe this is possible. See this post: Local file access with javascript