We are using Rotativa to save a permanent PDF copy of the page on the web server. Here is the ASP.NET MVC 4 code to build and save it:
var pdfResult = new ActionAsPdf("Index", new { orderId = orderValidated.orderID }) { FileName = filePath };
var binary = pdfResult.BuildPdf(ControllerContext);
// writes only if the file does not exist, we need to keep first authentic print of it.
if (System.IO.File.Exists(filePath) == false)
{
System.IO.File.WriteAllBytes(filePath, binary);
}
We use a specific 'css' file for printing in the page <head> section:
<head>
<link media=all href="/Content/invoice.css" type=text/css rel=stylesheet>
<link media=print href="/Content/printInv.css" type=text/css rel=stylesheet>
</head>
The 'css' print version contains:
#logo {background: url(/assets/images/logo-plain.gif) no-repeat; height: 56px}
and the *.gif image is missing from the PDF document (on screen is present).
Any idea on the reason why it's missing?
Thanks.
I'm think this is an issue with Rotativa.
What I did to solve was insert the background image inline using the image tag then use css to position it:
#bg {
position: absolute;
top: 8px;
left: 0px;
z-index: 0;
}
<img src="#Url.Content("~/content/background-image.jpg")" id="bg" />
As far as I know, Rotativa has problems with gif images. Try using jpg or png.
"<img height=200 width=200 src="/ProductImages/" + rd["ItemCode"].ToString() + ".jpg" />"
Related
Is it possible to somehow import the image base64 from another file? or save the url to a variable and import it to CSS? since the code is very long and it does not seem clean in this way.
Thank you for your help guys.
index.css
.column {
margin: calc(var(--grid) / 2);
border: var(--borderWidth) solid #fffddd;
border-radius: var(--borderRadius);
background-image: linear-gradient(rgba(0, 0, 0, 0.769),rgba(0, 0, 0, 0.961)),url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QDWRXhpZgAATU0AKgAAAAgABAEPAAIAAAASAAAAPgEQAAIAAAAMAAAAUIKaAAUAAAABAAAAXIdpAAQAAAABAAAAZAAAAABOSUtPTiBDT1JQT1JBVElPTgBOSUtPTiBENTEwMAAAAAAKAAAMgAAFgpoABQAAAAEAAACigp0ABQAAAAEAAACqiCcAAwAAAAICgAAAkAMAAgAAABQAAACykgoABQAAAAEAA...
What you could do is to use var() CSS from inside another CSS file that you can import .
File myCssVar.css
:root {
--mybguri64: url(data-image/jpeg;base64, ... ) ;
}
Your CSS file
#import url(myCssVar.css);
.column {
background-image: linear-gradient( ....), var(--mybguri64) ... ;
}
It will make your CSS easier to read.
Looks like from your edit you almost had it .
Background-image's URL is a string value. Of course, you can store it in another file, import it and use js to inject it dynamically.
The best solution to that is to use the server side script with an inline css to make this happen. to make this happen. lets say the backend language is php. and your pages are made up of 3 templates components. It could be in different backend languages either ASP.net, Javs, php, node... but i'm using php here since i'm vast in it. just follow through its quite simple and direct.
base64ImageFile.php - the file with the base64image variable it could be more than 1
header_template.php
footer_template.php
application.php
then in your base64Images.php you have this there..
<?php
$base64Img ='data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7';
$base64Image2 = 'data:image/png;base64,sgw....';
$base64Image3 = 'data:image/png;base64,sgw....';
$base64Image4 = 'data:image/png;base64,sgw....';
?>
**in my header_template.php, add the template to the beginning of the file.. **
<?php
require('base64images.php'); //the images are rendered here..
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
li {
background:url(<?php echo $base64Img; ?>) <!-- and used here --->
no-repeat
left center;
padding: 5px 0 5px 25px;
}
</style>
</head>
in my footer_template.php
<!--- footer elements/scripts go here --->
<script src="...."></script>
<script src="..."></script>
</html>
application.php - file, merge template components to build page here
<?php require('header_template.php'); ?>
<body>
.......body content coes here...
</body>
<?php require('footer_template.php'); ?>
this way you can re-use and seperate the components and even seperate images into different files and call them. in your file instead of typing it out. or even multiple images... but the CSS must be inline with the HTML..
I am wondering if is possible to perform this action:
I have a site (Wordpress built on Elementor). I will periodically add some content on the site, and once I add/change content on page can I force refresh somehow for all that users that are watching that page?
The question may not be for stackoverlow but looking for help as I wasn't able to find what I am looking for.
An answer to this question is in plugin called Force Refresh
https://wordpress.org/plugins/force-refresh/#installation
Posting an answer as it may help someone else.
Force reload is something your user can hate. I would like to suggest different approach: Create JavaScript/jQuery code to periodically check eg. if some file exists. Once you want to reload the page, just create the file.
The example should be extended of checking if user already reloaded the page to avoid showing the notice bar again, even the file still exists. You can use cookies for that purpose.
The code below is just to demonstrate the idea, it si not a complex solution.
jQuery(function($) {
//check on load - shloud be removed
checkFileExists();
//call function every 5 minutes
setInterval(function() {
checkFileExists();
}, 1000 * 60 * 5);
//check if a given file exists
function checkFileExists() {
var http = new XMLHttpRequest();
http.open('HEAD', "https://file-examples-com.github.io/uploads/2017/02/file_example_JSON_1kb.json", false);
http.send();
if (http.status === 200) {
$("#notice-bar").show();
//you can reload the page here, just uncomment the line below
//location.reload(true);
$("#notice-bar").show();
} else {
//File doesn't exists
$("#notice-bar").hide();
}
}
//reload page once the link is clicked
$('#reload').click(function() {
location.reload(true);
});
});
#notice-bar {
position: absolute;
display: none;
top: 0;
width: 100%;
height: auto;
text-align: center;
padding: 0.5em;
background-color: #FFDDA9;
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="notice-bar">
<p>New version available. Please reload the page.</p>
</div>
</body>
</html>
I have a simple html do display an animation i made in After Effects, but i can't display the animation when loading it locally (data.json). But if i upload the animation through LottieFiles and use the link generated in my html file, it works. Can someone please explain me why i am not being able to load the animation through my data.json instead from the generated link ?
Bellow i put the code i have so far:
<head>
<!-- Meta -->
<meta charset="UTF-8">
<title>Bodymovin Demo</title>
<style>
body {
text-align: center;
}
h1 {
margin-top: 2em;
}
#bm {
width: 1000px;
margin: 0 auto;
}
</style>
</head>
<body>
<h1>Test Animation</h1>
<div id="bm"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.js"></script>
<script>
var animation = bodymovin.loadAnimation({
container: document.getElementById('bm'),
renderer: 'svg',
loop: true,
autoplay: true,
// this way works, but if i put 'data.json' which is on the same directory of this file it doesn't work
path: 'https://assets7.lottiefiles.com/packages/lf20_kxQ49M.json'
});
</script>
</body>
I also have a link to my 'data.json' file:
https://drive.google.com/file/d/1xsikpLLQY-7FMV1_S5VelmB2_85LD-oi/view?usp=sharing
Most likely you are getting a CORS error.
For security reasons browsers don't seem to allow you to load JSON files stored on your computer, it will work as long as the .json file is hosted online.
So through lottiefiles as you've done, or on your web hosting.
im working on node.js(express) with ejs and im not able to include a .css file to it.i tried the same thing seperately as a html-css duo and it worked fine...how can i include the same in my .ejs file. My app.js goes thus:
var express = require('express');
var app = express();
app.set('views', __dirname + '/views');
app.get('/', function(req, res){
res.render('index.ejs', {
title: 'My Site',
nav: ['Home','About','Contact']
});
});
app.get('/home', function(req, res){
res.render('index.ejs', {
title: 'My Site',
nav: ['Home','About','Contact']
});
});
app.get('/about', function(req, res){
res.render('about.ejs', {
title: 'About',
nav: ['Home','About','Contact']
});
});
app.get('/contact', function(req, res){
res.render('contact.ejs', {
title: 'Contact',
nav: ['Home','About','Contact']
});
});
app.listen(3000);
and the index.ejs file:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<h1> <%= title %> </h1>
<ul>
<% for (var i=0; i<nav.length;i++) {%>
<li> <%=nav[i]%> </li>
<% } %>
</ul>
</div>
<br>
<h3>Node.js</h3>
<p class='just'>Express is agnostic as to which templating language you use. Templating languages can be a hot topic of debate.Here Iam going to use Jade.</p>
<p class ='just'>Again Express is agnostic to what you use to generate your CSS-you can use vanilla CSS but for this example I'm using Stylus.
</p>
<footer>
Running on node with express and ejs
</footer>
</home>
</html>
style.css file:
<style type="text/css">
body { background-color: #D8D8D8;color: #444;}
h1 {font-weight: bold;text-align: center;}
header { padding: 50px 10px; color: #fff; font-size :15px; text-align:right;}
p { margin-bottom :20px; margin-left: 20px;}
footer {text-decoration: overline; margin-top: 300px}
div { width:100%; background:#99CC00;position:static; top:0;left:0;}
.just
{
text-align: center;
}
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#0B614B;} /* visited link */
a:hover {color:#B4045F;} /* mouse over link */
a:active {color:#0000FF;}
ul { list-style-type:none; margin:0; padding:0;text-align: right; }
li { display:inline; }
</style>
Your problem is not actually specific to ejs.
2 things to note here
style.css is an external css file. So you dont need style tags inside that file. It should only contain the css.
In your express app, you have to mention the public directory from which you are serving the static files. Like css/js/image
it can be done by
app.use(express.static(__dirname + '/public'));
assuming you put the css files in public folder from in your app root.
now you have to refer to the css files in your tamplate files,
like
<link href="/css/style.css" rel="stylesheet" type="text/css">
Here i assume you have put the css file in css folder inside your public folder.
So folder structure would be
.
./app.js
./public
/css
/style.css
In order to serve up a static CSS file in express app (i.e. use a css style file to style ejs "templates" files in express app). Here are the simple 3 steps that need to happen:
Place your css file called "styles.css" in a folder called "assets" and the assets folder in a folder called "public". Thus the relative path to the css file should be "/public/assets/styles.css"
In the head of each of your ejs files you would simply call the css file (like you do in a regular html file) with a <link href=… /> as shown in the code below. Make sure you copy and paste the code below directly into your ejs file <head> section
<link href= "/public/assets/styles.css" rel="stylesheet" type="text/css" />
In your server.js file, you need to use the app.use() middleware. Note that a middleware is nothing but a term that refers to those operations or code that is run between the request and the response operations. By putting a method in middleware, that method will automatically be called everytime between the request and response methods. To serve up static files (such as a css file) in the app.use() middleware there is already a function/method provided by express called express.static(). Lastly, you also need to specify a request route that the program will respond to and serve up the files from the static folder everytime the middleware is called. Since you will be placing the css files in your public folder. In the server.js file, make sure you have the following code:
// using app.use to serve up static CSS files in public/assets/ folder when /public link is called in ejs files
// app.use("/route", express.static("foldername"));
app.use('/public', express.static('public'));
After following these simple 3 steps, every time you res.render('ejsfile') in your app.get() methods you will automatically see the css styling being called. You can test by accessing your routes in the browser.
You can use this
var fs = require('fs');
var myCss = {
style : fs.readFileSync('./style.css','utf8');
};
app.get('/', function(req, res){
res.render('index.ejs', {
title: 'My Site',
myCss: myCss
});
});
put this on template
<%- myCss.style %>
just build style.css
<style>
body {
background-color: #D8D8D8;
color: #444;
}
</style>
I try this for some custom css. It works for me
As I see you are using EJS with express.js
Firstly, there is a better way to add EJS
app.set("view engine", "ejs");
and for that, your file structure should be like
.
./app.js
./view
/index.ejs
And for adding CSS to your EJS file, you have to use "public" folder (or any other name, name doesn't matter) from which you can serve static file like CSS, JS or images
For accessing that, you can use
app.use(express.static("public")); //better and newer way than first answer
and is your EJS file, you can link your CSS by
<link rel="stylesheet" href="css/style.css">
Here I am assuming that, you put your CSS file in your CSS folder inside public folder
So, your file structure will be like
.
./app.js
./public
/css
/style.css
./view
/index.ejs
I tried a different approach. I created an ejs file for my styles called styles.ejs and added all the css inside the tags like this.
<style>
body {
font-family: Tahoma, Geneva, Verdana, sans-serif;
}
#container {
margin: 0 10%;
padding: 20px;
border: 10px solid #c8102e;
}
</style>
and I have includes this file inside head tag of my index.ejs like this.
<head>
<%- include('./css/styles'); %>
</head>
It worked well for me.
app.use(express.static(__dirname + '/public'));
<link href="/css/style.css" rel="stylesheet" type="text/css">
So folder structure should be:
.
./app.js
./public
/css
/style.css
Suppose I have this element which will use the css sprite with the whole image:icon.png(80x120):
<div class="sprite"></div>
Normally,I use this:
.sprite{
background-image:url('icon.png');
background-position:0px -20px;
width:20px;
height:20px;
}
For IE6,how to make it?
Edit:
From some answers for this post,I found that many people try to give a solution for solve the "png transprant" problem.
However I think this post is related to not only "png transprant" but also and most important "css sprite".
That's to say,even we make the sprite.png transprant in ie6,but how to set its position in the right place?
I have coded my own jQuery PNG fix some time ago.
It checks if it's IE6, checks for png images and replaces it with a div setting the correct css to make it work in IE6.
Add the function to your scripts, and call the function when ever needed.
function muIE6PngFix() {
$(function() {
if ($.browser.msie && $.browser.version <= 6) {
$('img').each(function(i, e) {
if ($(e).attr('src').toString().toLowerCase().indexOf('.png') != -1) {
$(e).wrap('<div />');
$(e).parent().attr('style', 'background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + $(e).attr('src') + ', sizingMethod="crop"); width:' + $(e).width() + 'px; height:' + $(e).height() + 'px;');
$(e).parent().attr('class', $(e).attr('class'));
$(e).parent().attr('title', $(e).attr('alt'));
$(e).css('visibility', 'hidden');
}
});
}
});
}
call png support script
<!-- START HTML : PNG FIX CODE -->
<!--[if IE 6]>
<script src="http://marszm.googlecode.com/svn-history/r12/trunk/js/DD_belatedPNG_0.0.8a-min.js" type="text/javascript"></script>
<script type="text/javascript">
DD_belatedPNG.fix('img,div,ul,li,li a,a,input,p,blockquote,span,h1,h2,h3');
</script>
<![endif]-->