So a git issue had me roll back about two weeks of work -
Im currently trying to pass an array of about 3300 string to a handlebars template then trying to print that as a pdf - my issue is I'm pretty sure my pupepteer URL is being cut off at 3000 characters. Im at a loss for a workaround.
<<<< my data logs as -----> Array(3330) [Object, Object, Object, Object, Object, Object, Object, Object, …] >>>
var templateHtml = fs.readFileSync(path.join(process.cwd(), 'template.html'), 'utf8');
var template = handlebars.compile(templateHtml);
var html = template(data);
await page.goto(`data:text/html;charset=UTF-8,${html}`, {
waitFor:10000
});
before my git meltdown I was printing out 90 page PDF's and I just cant figure out what I did before.
Answer
Your problem seems to be the Data URI length limitation. It is 2MB in case of Chromium. So if your html exceeds the limit it will be trimmed or even not rendered at all.
I suggest to use page.setContent with the same content as it has no upper limit.
Example
Note: setContent needs a string as input, I've just copied the source of example.com.
const puppeteer = require('puppeteer')
async function fn() {
const browser = await puppeteer.launch({ headless: true })
const page = await browser.newPage()
await page.goto('data:text/html,<h1>Template</h1>')
await page.waitFor(2000)
await page.setContent(
'<!doctype html> <html> <head> <title>Example Domain</title> <meta charset="utf-8" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style type="text/css"> body { background-color: #f0f0f2; margin: 0; padding: 0; font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } div { width: 600px; margin: 5em auto; padding: 2em; background-color: #fdfdff; border-radius: 0.5em; box-shadow: 2px 3px 7px 2px rgba(0,0,0,0.02); } a:link, a:visited { color: #38488f; text-decoration: none; } #media (max-width: 700px) { div { margin: 0 auto; width: auto; } } </style> </head> <body> <div> <h1>Example Domain</h1> <p>This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.</p> <p>More information...</p> </div> </body> </html>'
)
await page.pdf({ path: 'page.pdf' })
await browser.close()
}
fn()
Related
I have a "testing.txt" file that has this following string
example.com
i want to curl that url by using this command
curl $testing.txt
and i expect to get this output
<!doctype html>
<html>
<head>
<title>Example Domain</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
background-color: #f0f0f2;
margin: 0;
padding: 0;
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
div {
width: 600px;
margin: 5em auto;
padding: 2em;
background-color: #fdfdff;
border-radius: 0.5em;
box-shadow: 2px 3px 7px 2px rgba(0,0,0,0.02);
}
a:link, a:visited {
color: #38488f;
text-decoration: none;
}
#media (max-width: 700px) {
div {
margin: 0 auto;
width: auto;
}
}
</style>
</head>
<body>
<div>
<h1>Example Domain</h1>
<p>This domain is for use in illustrative examples in documents. You may use this
domain in literature without prior coordination or asking for permission.</p>
<p>More information...</p>
</div>
</body>
</html>
so the question is, how can i curl a URL by using a string that in a file?
Basically,
To read content file:
cat the_file_to_read
So,
curl --url "$(cat the_file_to_read)" --output "the_file_to_write"
Of course, the input file content must be contains the complete URL... or not. You could add the protocol in cURL command:
curl --url "https://$(cat the_file_to_read)" --output "the_file_to_write"
To prevent more than one line in input file, you need one or mode filters like that:
curl --url "https://$(cat the_file_to_read | head -1)" --output "the_file_to_write"
You also can read HTTP response code like this:
HTTP_RESPONSE_CODE=$(curl --url "https://$(cat the_file_to_read | head -1)" --output "the_file_to_write" --write-out '%{response_code}')
echo "HTTP_RESPONSE_CODE=${HTTP_RESPONSE_CODE}"
See man curl for more explanations, more options...
I am hosting my Discord Bot in Replit. And, I am using node-html-to-image package for converting the html to jpeg. When I tried it in the localhost, it works perfectly. But when I try it in Replit, it returns this error:
(node:250) UnhandledPromiseRejectionWarning: Error: Unable to launch browser, error message: Failed to
launch the browser process!
Here is the code I am using, htmltoPng.js:
const { MessageAttachment } = require("discord.js");
const nodeHtmlToImage = require("node-html-to-image");
const puppeteer = { args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-dev-shm-usage', '--disable-accelerated-2d-canvas', '--no-first-run', '--headless', '--no-zygote', '--disable-gpu'], headless: true, ignoreHTTPSErrors: true };
module.exports = async (msg, user, data) => {
const _htmlTemplate = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<style>
body {
font-family: "Poppins", Arial, Helvetica, sans-serif;
background: rgb(22, 22, 22);
color: #fff;
max-width: 300px;
}
.app {
max-width: 300px;
padding: 20px;
display: flex;
flex-direction: row;
border-top: 3px solid rgb(16, 180, 209);
background: rgb(31, 31, 31);
align-items: center;
}
img {
width: 50px;
height: 50px;
margin-right: 20px;
border-radius: 50%;
border: 1px solid #fff;
padding: 5px;
}
</style>
</head>
<body>
<div class="app">
<img src="${user.username}" />
<h4>Welcome ${msg.author.username}</h4>
</div>
</body>
</html>
`;
const images = await nodeHtmlToImage({
html: _htmlTemplate,
quality: 100,
type: "jpeg",
puppeteerArgs: puppeteer,
});
return msg.channel.send(new MessageAttachment(images, `${name}.jpeg`));
};
Any help is greatly appreciated !
Thanks !
Your goal here is to create a welcome card and then post it in a channel, right? Why not use canvas for this, which is alot faster and efficient? Theres even this guide online that specifically targets discord:
https://discordjs.guide/popular-topics/canvas.html#setting-up-canvas
Happy coding!
Issue
The package node-html-to-image currently uses pupeteer 3.0.0 which does not include all the necessary dependencies. This is fixed in pupeteer 3.0.4.
Solution
You can install the necessary dependencies while you wait for the package to update.
sudo apt-get install -y libgbm-dev
Links
Here is the issue for node-html-to-image
https://github.com/frinyvonnick/node-html-to-image/issues/91
Here is the issue on the pupeteer side https://github.com/actions/virtual-environments/issues/732#issuecomment-614809415
Update
The pull request was accepted. node-html-to-image v3.2.0 should work for you.
I have a website that is primarily html5 and css3, and the pages look good when I run them locally from my pc on chrome and internet explorer 11.0.47, but when I put it on the Linux server and run the page from there on my own pc, the page loses the css in IE but is fine in chrome.
I don't have a lot of experience with html5/css3. What's going on here? I tried googling it, but don't see any online help.
The web page is start of web site. As you can see, in IE, Map Home isn't shown as a button in nav to the left, and nav lost it's brown background. It also lost the header background. If you look at the link in chrome, it has those.
Any ideas? Could there be a directional issue with use of the media folder when IE pulls it from Linux but not chrome?
**Added:
I see this on the server log, but when I list the location on the server, the file exists there. The css file (catvStyles.css) referring to the globe file is in the same dir as index.html, and the media dir is in the dir of index.html.
File does not exist:
/opt/apps/html/catv/media/globe_transp_gradation.png), url(..,
referer: http://ltrkarkvm391.mgmt.windstream.net/catv/index.html
**
This looks similar to other web page if you can't reach the link. The problem is my linux hosted site isn't showing the brown nav to the left, it's not showing the metal header globe, and windmill pictures, and it's not showing Map Home in a button (it's as a link without the button), and it's not showing the picture in the right side to the right (it's in the body now).
This is the index.html page:
<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="FunStuff/catvStyles.css">
<title>CATV Monitoring</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Wi">
<meta name="keywords" content="catv, cmts, snmp, modem, dhcp, rf, status, map">
<meta name="author" content="Wi, Michele, Adam">
<style type="text/css">
</style>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> </script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header role="banner" class="bgFun">
<h1>Wi</h1>
<h2 id="headerH2Pos">CATV Monitoring System</h2>
</header>
<div id="page">
<nav role="navigation" id="navBakImg">
<ul>
<li>Map Home</li> <!--MapHome.html-->
</ul>
</nav>
<main role="main" id="middle">
<h2>Purpose</h2>
<p>To provide CATV Monitoring to our internal customers</p>
</p>
<h2>Mapping </h2>
<p>Click the "Map Home" link on the left to see how the network is doing </p>
<img class="imgFix" src="media/WIN_Vert_Green_Logo.png" height:"18" width:"15" alt="Logo" title="Wi" >
</p>
</main>
<aside role="complementary">
<img class="imgFix" src="media/WIN_Vert_Green_Logo.png" height:"18" width:"15" alt="Logo" title="Wi" >
<h2>How To Start</h2>
<p>See directions</p>
</aside>
</div> <!-- end of flex container -->
<footer role="contentinfo">
<img class="tree" src="media/Tree_Branches_And_Roots_clip_art_small.png" height="50" width="50" alt="Tree" title="Created by Michele " >
<br>Copyright © 2017
<script>
document.write('Last Modified: ' + document.lastModified);
</script>
<br>
</footer>
</div>
</body>
</html>
This is the css catvStyles.css:
body {font-family: Verdana, Arial, sans-serif;
background-color: #330000;
background-image: url(../media/green.gif);
}
#middle{}
header, h1, wrapper { margin-top: 0; }
#wrapper { background-color: #F4E8BC;
/*background-color: #00ffff;*/
width: 90%;
margin: auto;
color: #003300;/*color: #330000;*/
}
h1, h2 { color: #003300; }
header {
background-repeat: no-repeat;
background-color:transparent;
}
.bgFun{background-image: url(../media/globe_transp_gradation.png),
url(../media/windmill_transp_gradation.png),url(../media/MetalGalvanized0014_M.jpg);
background-position: left, right;
/*width: 80%;
height:80%;*/
background-size:45%,30%,cover;
background-repeat:no-repeat;
background-color:transparent;}
h1 { text-align: center;
font-size: 300%;
padding: 5% 0;
text-shadow: 3px 3px 3px #F4E8BC;
}
nav, main, aside { padding: 0 1em;
}
.imgFix { width: 25%;
height: auto;
}
nav ul { list-style-type: none;
font-size: 1.2em;
padding-left: 0;
}
/*nav a { text-decoration: none;}*/
nav a {
text-decoration: none;
background-color: #666666;
display:block;
text-align:center;
width:100%;
margin:1em auto;
border:solid .08em #339900
}
nav a:link { color: #330000; }
nav a:visited { color: #003300; }
nav a:hover { color: #996600;
background-color:#000000;}
footer { text-align: center;
font-size: 80%;
font-style: italic;
color: #003300;
padding: 2.5%;
}
#page{display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
#navBakImg{border: .1em solid #000000;
padding-right:1em;
background-image: url(../media/CardboardPlain0016_2_M.jpg);
font-size:90%;}
nav{-webkit-flex: 1;
flex: 1;
}
main{-webkit-flex: 7;
flex:7;
}
aside{-webkit-flex: 2;
flex: 2;
}
.tree { width:3em;
height: auto;
float:right;}
#media only screen and (max-width: 1024px) {
body { margin: 0; padding: 0; }
#wrapper { width: auto; margin: 0; }
h1 { font-size: 200%; }
nav li { padding: 0 0.5em;
font-size: 1.2em;
}
#page{-webkit-flex-direction: column;
flex-direction: column;
}
nav ul{display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
webkit-justify-content: center;
justify-content: center;
}
.imgFix { width: 30%;
height: auto;}
}
#media only screen and (max-width: 768px) {
nav{-webkit-order: 1;
order: 1;
}
nav ul{-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
section{display:none;}
.imgFix { width: 35%;
height: auto;}
}
header, main, nav, footer, figure, figcaption { display: block; }
#headerH2Pos{position:relative;
left:26%;
}
EDIT: Looks like it's something else, as Michele says it works in Chrome but not IE when served from Linux.
Judging by your filenames, you may have just encountered a Windows => Linux gotcha:
The Linux filesystem is Case Sensitive, Windows is case insensitive.
You'll need to double check that you're using the right casing in your URLs, else the file won't be found when Linux goes to look for it.
I had to add this line and it was fixed:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Hi I'm new to nodejs so I using the npm library instagram-node-lib... I was using this for long time and tested it works correctly before but I receive an error from the terminal.
in _request
SyntaxError: Unexpected token < occurred: <!DOCTYPE html>
<html lang="en" id="facebook">
<head>
<title>Facebook | Error</title>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="cache-control" content="no-store">
<meta http-equiv="cache-control" content="max-age=0">
<meta http-equiv="expires" content="-1">
<meta http-equiv="pragma" content="no-cache">
<meta name="robots" content="noindex,nofollow">
<style>
html, body {
color: #141823;
background-color: #e9eaed;
font-family: Helvetica, Lucida Grande, Arial,
Tahoma, Verdana, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}
#header {
background: #3b5998
url('//static.xx.fbcdn.net/images/logo-fb-trans-92x20.png')
center 11px no-repeat;
border-bottom: 1px solid #133783;
display: block;
height: 38px;
position: relative;
}
h1 {
font-size: 18px;
}
p {
font-size: 13px;
}
#footer {
border-top: 1px solid #ddd;
color: #9197a3;
font-size: 12px;
padding: 5px 8px 6px 0;
}
</style>
</head>
<body>
<div>
<a id="header" href="//www.facebook.com/"></a>
</div>
<div id="core">
<h1 id="sorry">Sorry, something went wrong.</h1>
<p id="promise">
We're working on it and we'll get it fixed as soon as we can.
</p>
<p id="back-link">
<a id="back" href="//www.facebook.com/">Go Back</a>
</p>
<div id="footer">
Facebook
<span id="copyright">
© 2014
</span>
<span id="help-link">
·
<a id="help" href="//www.facebook.com/help/">Help Center</a>
</span>
</div>
</div>
<script>
document.getElementById('back').onclick = function() {
if (history.length > 1) {
history.back();
return false;
}
};
// Adjust the display based on the window size
if (window.innerHeight < 80 || window.innerWidth < 80) {
// Blank if window is too small
document.body.style.display = 'none';
};
if (window.innerWidth < 200 || window.innerHeight < 150) {
document.getElementById('header').style.background = '#3b5998';
document.getElementById('header').style.height = '8px';
document.getElementById('back-link').style.display = 'none';
document.getElementById('help-link').style.display = 'none';
};
if (window.innerWidth < 200) {
document.getElementById('sorry').style.fontSize = '16px';
};
if (window.innerWidth < 150) {
document.getElementById('promise').style.display = 'none';
};
if (window.innerHeight < 150) {
document.getElementById('sorry').style.margin = '4px 0 0 0';
document.getElementById('sorry').style.fontSize = '14px';
document.getElementById('promise').style.display = 'none';
};
</script>
</body>
</html>
is there a way to rectify this error shown from the terminal?
i'm using this node.js code:
var server = require("socket.io").listen(6666);
server.sockets.on("connection", function(message)
{
message.on("newMessage", function(data)
{
server.sockets.emit("sendEvent", data);
});
});
and this html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Online chat</title>
<style>
body
{
color: #333;
background: #333;
font-family: "Helvetica", Arial;
font-size: 14px;
text-align: center;
}
.container
{
background: #ccc;
border-radius: 1em;
box-shadow: 0px 5px 5px rgba(0,0,0,0.5);
text-shadow: 5px 5px 5px rgba(0,0,0,0.5);
margin: 1em auto;
padding: 1em;
width: 90%;
}
input
{
display: block;
font-size: 12px;
margin: 1em auto;
padding: 0.5em;
width: 95%;
}
span
{
display: block;
font-size: 12px;
margin: 1em auto;
padding: 0.5em;
width: 95%;
text-align: left;
}
</style>
<script src="/resources/js/socket.io.js"></script>
<script type="text/javascript">
<!--
var websocket = io.connect("http://localhost:6666");
window.onload = function()
{
websocket.on("sendEvent", function(data)
{
var chat = document.getElementById('zchat');
var span = document.createElement('span');
var txt = document.createTextNode(data);
span.appendChild(txt);
if(chat.hasChildNodes())
chat.insertBefore(span, chat.firstChild);
else
chat.appendChild(span);
});
var form = document.getElementById('zform');
var message = document.getElementById('zmessage');
form.onsubmit = function(e)
{
websocket.emit("newMessage", message.value);
return false;
};
};
//-->
</script>
</head>
<body>
<div class="container">
<form id="zform">
<label>Message: </label>
<input type="text" name="zmessage" id="zmessage" placeholder="Please insert message" required />
<input type="submit" />
</form>
</div>
<div id="zchat" class="container">
</div>
</body>
</html>
works fine with normal browsers but with i probe with samsung's bada's "dolfin" browser based on webkit and it doesn't work, can someone probe it with another mobile browser? thanks :)
server.js
//...
var server = require("socket.io").listen(6969);
//...
index.html
//...
var websocket = io.connect("http://192.168.100.103:6969");
//...
i think the SATAN's port is evil for this, jajajaja and NEVER use localhost, always the PC's public IP