I am using PhantomJS to capture an image of a website built using Polymer. Here is my capture.js file:
var page = require('webpage').create();
page.open('https://www.gosizzle.io/token/recruiting/957e73c45b55129b1a', function() {
page.render('test1.png');
phantom.exit();
});
However when I run
phantomjs capture.js
my test1.png only contains the footer of the website:
Related
It works on Edge, Chrome, Firefox, but not in safari. In Safari the iframe looks like it knows it should display a pdf (grey background) but with no pages inside it.
const pdf = new Blob([new Uint8Array(arrayBuffer)], { type: 'application/pdf' })
setDataStreamURL(window.URL.createObjectURL(pdf))
...
<iframe title={iframeTitle} className={className} src={dataStreamURL} type={type} />
It does work fine if I give it an url to a pdf like this one:
https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf
but I need to give it the blob:... url created by window.URL.createObjectURL(pdf)
I might be a little late in answering this but I faced this same issue while previewing a PDF from a blob url using an iframe on Safari. FileReader did the trick for me. From your code, instead of using window.URL.createObjectURL(pdf), read the blob which is here is pdf through a FileReader as shown bellow:
const pdf = new Blob([new Uint8Array(arrayBuffer)], { type: 'application/pdf' })
const reader = new FileReader();
reader.onload = () => {
const url = reader.result; // Use this `url` in iframe src
};
reader.readAsDataURL(pdf);
Note that this trick worked in Safari but might not work in other browsers, so use the blob url for other browsers and this trick for Safari.
I am having problem to get screenshots of the website that loads through JS. I want to get the screenshots of that site but I got black screenshots .The code is working fine for other websites except this one which loads all content through js.( website is: https://signup.investorplace.com/?cid=MKT390371&eid=MKT390711&encryptedsnaid=&snaid=&step=start&assetId=AST96863)
My code is here:
var webpage = require('webpage');
var page=webpage.create();
var system=require('system');
var url='http://'+system.args[1];
page.settings.resourceTimeout = 15000; // 15 seconds
page.open(url, function (status) {
if (status !== 'success') {
console.log('Unable to load the address!');
} else {
window.setTimeout(function () {
page.render('preview.jpg',{format:'jpeg',quality:'80'});
phantom.exit();
},3000);
}
});
Notice how you create the url variable, using http protocol
var url='http://'+system.args[1];
But your target page is served via https. The url is bound to be incorrect.
When given the correct URL, PhantomJS will produce a valid preview
I am new to Casperjs, phantomjs .I have been trying hard to create some page automation to login and take some steps in a CMS but i am having issues with accessing the global window variables from casperjs evaluate() function. the below example is just checking jquery on Google. Jquery exists in the page and some other global functions but i can't access them from casperjs.
casper.start('https://www.google.ca/#hl=en', function() {
// search for 'casperjs' from google form
this.fill('form[action="/search"]', { q: 'casperjs' }, false);
});
casper.then(function() {
this.evaluate(function jquery() {
console.log('looking for jquery ---');
console.log($ + 'exists');
});
});
getting error - `ReferenceError: Can't find variable: $
How can i fix this ?
Any help is appreciated :)
For use jQuery in casperjs
inject script in page, something like:
var casper = require('casper').create({
some code here,
clientScripts: ['/path/to/jquery.js'],
});
In page.open I can read about how to open a page using http.
How do use the WebPage module to open an url from the file system?
I have tried to omit http:// and have an url with ../some_dir/foo.html, but it seems to fail.
I Have tried this:
var page = require('webpage').create();
var fs = require('fs');
fs.changeWorkingDirectory('../foo/bar');
page.open('file://index.html', function(status)
{
console.log(status);
//console.log(document.title);
phantom.exit();
});
which outputs "fail".
I got the advice to test an absolute path, trying this:
var page = require('webpage').create();
var fs = require('fs');
page.open('file:///absolute/path/to/index.html', function(status)
{
console.log(page.title);
console.log($('body').length);
phantom.exit();
});
(with and without the call to changeWorkingDirectory, but with the same result)
I get a page title, but phantomjs reports that $ is undefined, jQuery is included in my html file (that is too large to post here). It is included like this:
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
Trying to run functions also produces errors like
Can´t find variable: function_name
Does the page/file you are opening already have jquery embedded on the page? If not, you will need to use either injectJs or includeJs on the page object before you can use the $ operator.
http://phantomjs.org/page-automation.html
If you are just doing a simple DOM selection, I would recommend just calling
document.querySelector('body').length
As these functions already exist within the Phantom instance.
I am using wicked_pdf plug-in for generating pdf. I am showing message and spinner when user click on pdf link and i want to hide that when pdf is generated and pushed to browser for download/show. I have added jquery code on body onload which will not execute. Is there any other way to trigger jquery function when pdf file pushed to browser?
This is a rather complicated issue, but can be solved nicely if you are willing to use jQuery plugins. http://jqueryfiledownload.apphb.com/ is a plugin that can do exactly what you need if I understood you correctly.
My frontend code looks like this
$.fileDownload('/Content/Print', {
successCallback: function (url) {
$("#PrintingMessage").dialog('close');
},
failCallback: function (responseHtml, url) {
$("#PrintingMessage").dialog('close');
if (responseHtml.indexOf('Error403') != -1) {
$("#PrintingFailedMessage").html("Error 403.");
} else if (responseHtml.indexOf('Error500') != -1) {
$("#PrintingFailedMessage").html("Error 500.");
}
$("#PrintingFailedMessage").dialog({ modal: true });
},
httpMethod: "POST",
data: $('#PublishForm').serialize()
});
And my backend does this at the end of the process. You'll have to translate that yourself :)
Response.SetCookie(new System.Web.HttpCookie("fileDownload", "true") { Path = "/" });
return File(file, System.Net.Mime.MediaTypeNames.Application.Octet, filename);