I am working on a Meteor project where I need to generate a PDF export of a section from the page.
I use webshot to generate the export.
A recent requirement is to use a public static asset - a logo image - in the export.
I worked around making css assets available to phantomjs by reading all the css files and copying their content into style tags in the HTML doc I let webshot consume. That works fine.
For the images, I replace the "./images/" pattern in the HTML with the full path to the images folder on the server using
const buildPath = path.resolve('.').split(path.sep + 'server')[0];
const imagePath = buildPath + '/web.browser/app/images/';
which runs on the server. The image doesn't show up.
When I open the generated HTML (I save it for debugging) at any place on my dev machine, the image path is resolved fine, and I get the image.
What is the right way to access those static assets in phantomjs?
I figured that out - I was missing a fully qualified protocol in the src attribute of the img tag. While Chrome is smart and forgiving, phantomjs is not.
So basically I had to add 'file:///' before the full path to the image.
It now looks like:
const buildPath = path.resolve('.').split(path.sep + 'server')[0].replace(/\\/g, '/');
const imagePath = buildPath + '/web.browser/app/images/';
html = html.replace(/src="\.\/images\//g, 'src="file:///' + imagePath);
And as for the comment regarding time, I do give full 1 sec delay for rendering, but didn't check if it works without it.
Related
I'm building a simple website using Node.js, Express and the EJS template engine and I'm having trouble getting my external CSS files to load on the routes that have route parameters. My code looks like this:
const express = require("express");
const app = express();
var AWS = require('aws-sdk');
var uuid = require('uuid');
var request = require('request');
var Amplify = require('aws-amplify');
const { info } = require("console");
app.use(express.static("public"));
app.set("view engine", "ejs");
app.get("/Test1/", function(req, res){
res.render("Test1.ejs");
});
app.get("/Test2/:route", function(req, res){
res.render("Test2.ejs")
});
Test1.ejs and Test2.ejs are exact duplicates of each other, one being copy pasted from the other.
I'm able to to see the CSS file loading properly on Test1 but on Test2 express is sending the HTML of Test2.ejs in place of the actual CSS file. This is without reloading or changing anything. I would be less confused if the CSS just wasn't loading properly on any of my routes, as that would indicate some problem with how I'm using express, but I can't figure out how it can be working properly on all my other routes and fail whenever a route parameter is used. I'm also tried actually using the route parameter e.g.
app.get("/Test2/:route", function(req, res){
const routeParam = req.params.route;
res.render("Test2.ejs", {
routeParam: routeParam
});
});`
I also displayed routeParam in the page to make sure that was working, and it does, except the page is still getting the HTML of the page in place of the proper CSS file, causing it to be poorly formatted.
I'd appreciate any help on this, thank you
Thanks for looking into this CoderFF, you helped me figure out how to get it to work. It look like the problem was that my css file was directly inside the public folder, as opposed to in a subdirectory within it. The html has to be like this:
<link rel="stylesheet" type="text/css" href="/css/customStyle.css" />
it has to include that leading '/' in the href tag. I don't know how it was working for me before without that on routes without route parameters, but it was. The same seems to apply for images in an /images/ folder within the public folder.
I can't really reproduce this. What I'm doing is:
Placed my CSS in public/css/all.css. File contains only one line: html {background-color: #aaaaaa} so I can tell it's loaded
Place two templates into views/Test1.ejs and views/Test2.ejs and put the same contents in them: <html><head><link rel="stylesheet" type="text/css" href="/css/all.css"/></head><body></body></html>
And it works perfectly.
I suppose that you've created a folder Test2 inside of your public/ folder, in which you placed your CSS. In that case, your path to the CSS is /Test2/some.css matches your second route and instead of getting a CSS file, you get an HTML from the route.
In that case, moving your CSS files will help.
I'm working on a complicated site that has a lot of css files and js files that load on every page. I'm working on a single css using Chrome's developer tools. Once the css is mostly correct in developer tools, (Element tab, Styles side bar), the css is copied to a local css file and then uploaded to the web server. Since only a single css file has been modified it would be faster to reload a single css file instead of hard refreshing and reloading the entire site including images, js, and css, etc.
The site has an option to minify the css file and combine it with the other css files, creating one single very large css file. That option is turned off while in development mode. Adding a version number to the css file name isn't the trick I'm looking for.
Is it possible in Chrome Developer tools to click on a source file and refresh only that file?
This is a bit of a hack, but I think it'll work for your scenario.
When I initially load an example page, you can see three CSS requests:
I want to refresh the devsite-googler-buttons.css file, so I find it in my DOM Tree:
(Command+F on Mac or Control+F on Windows / Linux opens up that search panel at the bottom of the Elements panel... makes it easier to find stuff in a big DOM)
Right-click, select Edit as HTML, and then append a random query string to the end of the link:
And in the Network panel, you can see that the file was re-downloaded:
See also: Konrad's answer provides some handy code for automating this via a Snippet.
It might be handy, in your situation, to automate it a bit:
function reloadCSS() {
const links = document.getElementsByTagName('link');
Array.from(links)
.filter(link => link.rel.toLowerCase() === 'stylesheet' && link.href)
.forEach(link => {
const url = new URL(link.href, location.href);
url.searchParams.set('forceReload', Date.now());
link.href = url.href;
});
}
reloadCSS();
What this function does is it forces all CSS files to be reloaded by appending current time to their URLs.
You can modify it to target a specific file. You can run it from console, via DevTools 'snippets' functionality or make it into an extension.
If you don't mind refreshing the page, but don't want to re-download all resources, try the following.
Open the css file in a new tab. (You can right click css files from the Chrome developer tools and choose "open in new tab");
Hard-refresh this tab (ctrl/cmd + f5);
Soft-refresh the page (f5 or ctrl/cms + r).
According to me only Live editing is the only possible way what you are looking for I suppose. There is no way to refresh a single css file.
So this isn't relly a problem but more like automate thingy...
I built a website and had to copy loads of content from previous webpage. I did that by copy-pasting the content from old page to the new page made with wordpress.
All link and images in the content still point to the old page. So I'd like to find something like a webscraping tools which would analyze list of selected links and then output would be all link pointing outside of my webpage and list of all images that I have to download
Considering that your old and new websites are going to have the same URL structure, here is a bookmarklet that you can save as a bookmark to your toolbar.
To make your job easy, open an old website page, and simply click on the bookmarklet button you've saved (code below). This code will replace the links from old website to new website. The images will be treated similarly. Next, you can copy the updated content and paste it into the editor of your new website (wordpress admin).
On the developer's console (F12 key), you will get a list of all the images that you have to download.
javascript:(function(){
var jqscript = document.createElement('script');
jqscript.onload = function() {
// treat the <a> tags
jQuery('#my-content-container').find('a[href^="http://my-old-website.com"]').each(function(i, anchor) {
jQuery(anchor).attr('href', jQuery(anchor).attr('href').replace('http://my-old-website.com', 'http://my-new-website.com/new-directory'));
});
// treat the <img> tags, and make a list of images to download
var images_to_download = [];
jQuery('#my-content-container').find('img').each(function(i, image) {
images_to_download.push(jQuery(image).attr('src'));
jQuery(image).attr('src', jQuery(image).attr('src').replace('http://my-old-website.com', 'http://my-new-website.com/new-directory'));
});
// output a list of images to the developer console
console.log(images_to_download);
};
jqscript.src = "//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js";
}());
P.S. To save this bookmarklet code, rightclick the toolbar of your browser and create a new bookmark, and enter the above code as the Location/URL.
This is just an option you should think about: You could use absolute path instead of Relative path, this will help you reuse code without to have to remap every link in it.
Relatif Path :
Read about my Tahiti vacation.
Absolute path :
Read about my Tahiti vacation.
I'm trying to create an app that loads a website and then adds some custom CSS to adjust it to a mobile device.
I'm using window.open to load the page successfully, and I have a callback on loadstop where I'm calling browser.insertCSS, this is where the problem is.
If I do something like this:
browser.insertCSS({code:"body{background-color:red;}");
The style is applied correctly. However if I do this:
browser.insertCSS({file:"mobile-style.css");
And add the same CSS to the file, it doesn't get loaded
I have tried different paths (putting the file in the www folder, in the css folder, in the same folder as the JS file, and referencing it with "./mobile-style.css", "mobile-style.css", "/www/mobile-style.css", "/mobile-style.css" but none of them seem to load the file correctly.
I saw another post What should file paths fed to insertCSS() be relative to? where this same question was asked, but there is no accepted answer (I have tried the suggestion there and it doesn't work).
Any help would be greatly appreciated.
Thanks
Will
you have to wait until your inAppBrowser page loading finishes.
You must add an event listener:
var inApp = window.open('mypage.html', '_blank', 'location=no');
inApp.addEventListener('loadstop', function(){
inApp.insertCSS({
file: 'inAppStyle.css'
},onSuccess);
});
EDITED
Use this path for your android projects file:///android_asset/{your folder}
INFO: https://github.com/apache/cordova-plugin-file/blob/master/doc/index.md#android-file-system-layout
I couldn't find the right local path. Instead, I just uploaded the css file to the web and provided a regular URL
file: 'http://mywebsite.com/path-if-needed/my.css'
Not ideal to have an external dependency, but not a big deal since InAppBrowser itself requires internet access.
I probably know why it won't work, it is because your path isn't right, this css file should not put in www folder, neither the cordova project folder, u should put it into the server, for example, if ur browser is to visit http://192.168.1.1/admin, then the cordova only fetch this file when the browser is under the 192.168.1.1/admin, it fetch the file under the server directory.I don't know if u use any debug tool , if u use one, it's easy to find out what went wrong, ur console will log the error which path it fetch the css file and didn't get it.
If you want to add an external CSS file stored locally in the APP's sandbox and not around in the Internet, this is the only way, that is, you get the external file, you store it into a string variable, and then you insert such code into the Browser.
var inAppBrowserRef = cordova.InAppBrowser.open(url, "_blank", "location=no");
//when load stops call loadedCallbackFunction
inAppBrowserRef.addEventListener('loadstop', loadedCallbackFunction);
function loadedCallbackFunction() {
console.log("InAppBrowser Window loaded");
$.ajax({
type: "GET",
url: cordova.file.applicationDirectory + "www/css/myExternalCSS.css",
dataType: "text",
success: function (CSScode) {
inAppBrowserRef.insertCSS(
{ code: JScode},
function(){
console.log("CSS code Inserted Succesfully into inApp Browser Window");
});
},
error: function () {
console.error("Ajax Error");
}
});
}
You need the cordova-plugin-inappbrowser
I have a web page that will display an image.
I created a folder within my website called 'photo' and uploaded that image to that folder using the following code:
string path = Server.MapPath(#"~/Photo/");
FileUpload1.SaveAs(path+FileUpload1.FileName);
I am using the following code but the image is not being displayed in the image control.
string path = Server.MapPath(#"~/Photo/");
Image1.ImageUrl = path + photoInfoObject.Photo;[photoInfoObject.Photo is a string of the name of the photo(eg: Penguins.jpg).]
still that image is not displaying.can anyone fix this?
Your code looks ok so this is probably a broken link to your image, for example you may be rendering an absolute path to /Photo/Penguins.jpg, whereas if you're using the build in Visual Studio Web Server with a virtual directory, the absolute path would be /Your Site Name/Photo/Penguins.jpg. So check the generated HTML to find out the path, and maybe use the "Net" panel inside the Firebug plugin for Firefox to easily see any 404 errors as the page loads.