I have a vueJS component that I want to print. However, when I use the standard print dialog I lose all the CSS and basically only have plain text.
I have also tried Printd.
My code is along the lines of:
mounted () {
this.cssText = `
.a4-paper {
height: 29cm;
width: 14cm;
}
h4, h3, h2, h1 {
text-align: center;
width: 100%;
}
label.underline {
border-bottom: solid black 1px;
height: 0.3cm;
width: 100%;
}`;
this.d = new Printd()
},
methods: {
show(event: Event) {
this.event = event;
this.visible = true;
},
print() {
this.d.print(this.$el, this.cssText)
}
}
However, the result looks nothing like how the component is rendered. I haven't been able to find a solution for this. Can somebody help me?
The problem exists because printd creates a new Document for printing, therefore styles aren't carried down into the child component, which you are referencing with this.$el
The workaround which I use is to take all of the style elements from the head of the current document and append them to the document that printd creates. Change your print method to the following;
print() {
const d = new Printd()
d.print(this.$el, this.cssText, (win, doc, node, launchPrint) => {
// Get style elements
const styles = [].slice.call(document.getElementsByTagName('style'))
// append them to the the new document head element
styles.forEach(styleElement => doc.head.appendChild(styleElement.cloneNode(true)))
launchPrint(win)
})
},
Related
I am trying to render a simple Azure Map in a vue.js single-file component. I can get the map to draw at a specified center and zoom. And draw a line segment exactly where I want it.
But I cannot draw a marker properly. It does draw, but it is seriously south-west from the specified coordinate (which is on the an endpoint of a line segment drawn previously).
Here's a single page Vue.js 'App.vue':
<template>
<div id="myMap"></div>
</template>
<script>
import * as atlas from "azure-maps-control";
export default {
mounted: function() {
this.map = new atlas.Map("myMap", {
center: [-113.666783, 53.806008],
zoom: 7,
view: "Auto",
authOptions: {
authType: "subscriptionKey",
subscriptionKey: "<redacted>",
},
});
let self = this;
//Wait until the map resources are ready.
this.map.events.add("ready", function() {
//Create a data source and add it to the map.
var dataSource = new atlas.source.DataSource();
self.map.sources.add(dataSource);
//Create a line and add it to the data source.
dataSource.add(
new atlas.data.LineString([
[-112.926043, 53.803],
[-113.666783, 53.806],
])
);
//Create a line layer to render the line to the map.
self.map.layers.add(
new atlas.layer.LineLayer(dataSource, null, {
strokeColor: "blue",
strokeWidth: 5,
})
);
//Create an HTML marker and add it to the map.
var marker1 = new atlas.HtmlMarker({
color: "DodgerBlue",
position: [-112.926043, 53.803],
anchor: "bottom",
htmlContent: '<div class="pulseIconNormal"></div>',
popup: new atlas.Popup({
content:
'<div style="padding:10px">Sensor</div>',
pixelOffset: [0, -30],
}),
});
self.map.markers.add(marker1);
//Add a click event to toggle the popup.
self.map.events.add("click", marker1, () => {
marker1.togglePopup();
});
});
}
}
</script>
<style>
#myMap {
height: 100vh;
width: 100vw;
}
.pulseIconNormal {
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
background: blue;
}
</style>
When I looked at DOM for the marker (in Firefox dev tools), this is the style that I see:
transform: translate(-50%, -100%) translate(737px, 235px) rotateX(0deg) rotateZ(0deg);
This isn't coming from CSS, but is in inline. That's the reason, but not the explanation why. It appears the control itself is generating this.
I found the problem. I am using NPM to load azure-maps-control and I had to explicitly add
<style src='azure-maps-control/dist/atlas.min.css'></style>
to the .vue file.
The map div in your code isn't closed properly. Instead of <div id="myMap" /> it should be <div id="myMap"></div>. HTML standards say self closing div's are invalid. Give that a try and see if it helps.
If it doesn't try inspecting the HTML marker DOM to see if any CSS is being appended to it by your app and try adjusting to see if it addresses the issue.
Looking at your code, the HTML marker should be anchored bottom center to its position.
For the same problem with Angular (11), I had to add the azure css file to my angular.json like so:
"styles": [
"src/styles/styles.scss",
"node_modules/azure-maps-control/dist/atlas.min.css"
],
I just started learning Vue and I was wondering, why should I use v-bind for style and not write it regularly in html/css file
Let's say you need to create a progress bar that is not static. You will then need to update the style attribute width for-example.
To accomplish this, we need to programatically edit the width of the element. We 'cannot' to this in plain css, therefore the :style attribute comes in handy.
Let's create an example:
Codepen
HTML
<div id="vue">
<div class="progress-bar">
<div :style="{'width':progress + '%'}" class="progress" />
</div>
<button #click="fakeProgress">Init fake progress</button>
</div>
Css;
.progress-bar, .progress {
border-radius: 20px;
height: 20px;
}
.progress-bar {
width: 250px;
background-color: gray;
}
.progress {
background-color: blue;
width: 0;
transition: all 1s ease;
}
Javascript
new Vue({
el: '#vue',
data: {
progress: 0
},
methods: {
fakeProgress() {
let progress = setInterval(() => {
if(this.progress == 100) {
clearInterval(progress)
} else {
this.progress += 1;
}
}, 50)
}
}
})
As you see here, we bind the progress data attribute to the width value on the fake progress bar. This is just a simple example, but I hope this makes you see its potential. (You could achieve this same effect using the <progress> tag, but that would ruin the explanation.
EDIT; Also want to point out that you are supposed to write all your css as normal as you point out in your question. However, :style is used in cases that you cannot normally use css for. Like the example above where we need css to change from a variable.
While playing around with Mithril I stumbled upon this issue and I'm not sure if it's a bug or a feature or I'm doing something wrong.
Please, run the script below and click on View Two and then on Link three. You'll see that the console outputs "RENDER TWO" each time you click on Link three. It doesn't make any sense, because in the code link component has neither href nor oncreate: m.route.link specified. It's as if it inherits it from the previous route or something. Also, if I remove onclick handler everything works as expected(console outputs nothing).
I've also opened an issue on github. If you feel you can help fix it please go here.
Anyway, do you have any idea what's going on?
const outlet = document.body;
//COMPONENTS
class Link {
view(vnode){
return m('a', vnode.attrs, vnode.attrs.title);
}
}
class ViewOne {
view(vnode){
return m('div', 'view one');
}
}
class ViewTwo {
view(vnode){
return m('div', this.getLinkThree());
}
getLinkThree(){
return m(Link, {
title: 'Link three',
onclick: () => {} // removing this handler solves the problem (routerResolver's render not invoked)
});
}
}
//HELPERS
const getLinkOne = () => {
return m(Link, {
title: 'View One',
href: '/one',
oncreate: m.route.link
});
}
const getLinkTwo = () => {
return m(Link, {
title: 'View Two',
href: '/two',
oncreate: m.route.link
});
}
const getViewHolder = () => {
return m('#view-holder');
}
//INIT
m.render(outlet, [
getLinkOne(),
getLinkTwo(),
getViewHolder()
])
m.route(document.getElementById('view-holder'), "/one", {
"/one": {
render: () => {
console.log('RENDER ONE');
return m(ViewOne);
}
},
"/two": {
render: () => {
console.log('RENDER TWO'); //also logs when clicking on 'Link three'
return m(ViewTwo);
}
}
})
a {
padding: 5px;
background-color: grey;
margin-right: 5px;
}
#view-holder {
width: 200px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
background-color: lightgrey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/1.1.1/mithril.min.js"></script>
Eugene, this is expected Mithril 1.x behavior: triggering a ui-event handler causes a vdom build + diff.
Separately it's ... unusual ... to have both m.render() and m.route() calls as part of setup. In this case just m.route() suffices. Pls see here (you'll need to prefix the following short-link with "https://"): goo.gl/z8rZFf
BTW the above leads to an editor called "Flems" -- it encodes file references, in-situ code, etc into the URL, so to share a Flems just copy/paste its URL. This has the advantage of being able to share work without creating physical resources such as w/ JSBin, etc, but a downside is that in most cases the URL needs to be shortened to be share-able.
I am unable to find way of adding header and footer in pdf page using phantom-html2pdf with Express and Coffeescript. My code is as follows can you please review it and tell me what I am missing:
pdf = require('phantom-html2pdf')
exports.test_pdf = (req, res) ->
paperSize = {
format: 'A4',
margin: "1cm",
orientation: 'portrait'
header: {
height: "200cm",
contents: '<h1>This is the Header</h1>'
},
}
htmls = '<html><body><h2>PDF CONTENT</h2></body></html>';
options = {
html: htmls,
css: "./public/stylesheets/foundation.css",
paperSize : page.paperSize
}
pdf.convert options, (err, result) ->
if !err
result.toBuffer()
# Using a readable stream
result.toStream()
# Using the temp file path */
result.getTmpPath()
# Using the file writer and callback */
result.toFile("./html/pdf_file.pdf")
else
res.render('index', { title: 'Social Media'})
I have already done some research that to add header and footer, I need to export a paperSize object from a runnings file. https://github.com/bauhausjs/phantom-html2pdf/issues/30
but adding that too could not help me or I am not adding it correctly.
A little help will be much appreciated. Thanks in advance.
module.exports will resolve your problem. After creating the page object for header & footer. you will export the object with module.export.
Here is the sample code
module.exports = {
header: {
height: '3cm', contents: function (page) {
return '<header class="pdf-header" style=" overflow:hidden; font-size: 10px; padding: 10px; margin: 0 -15px; color: #fff; background: none repeat scroll 0 0 #00396f;"><img style="float: left;" alt="" src="../images/logo.jpg"><p> XYZ </p></header>'
}
},
footer: {
height: '3cm', contents: function (page) {
return '<footer class="pdf-footer" style="font-size: 10px; font-weight: bold; color: #000;><p style="margin: 0">Powered by XYZ</p></footer>'
}
},
}
Note: You need to create runing file and copy & paste given code in it.
I am trying to create a menu which is hidden but appears, fixed to the top, once the user begins scrolling down the page. So far I have managed to create a menu which sticks to the top upon scrolling but am stuck on how to hide this menu initially.
This is the code I am using so far:
(I am using wordpress-headway)
JQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
//STICKY NAV
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i) ? true : false;
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i) ? true : false;
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i) ? true : false;
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
}
};
//Calculate the height of <header>
//Use outerHeight() instead of height() if have padding
var aboveHeight = $('.top-row').outerHeight();
//when scroll
$(window).scroll(function(){
//if scrolled down more than the header’s height but this isn't mobile
if ($(window).scrollTop() > aboveHeight && !isMobile.any()){
// if yes, add “fixed” class to the <nav>
// add padding top to the #content
// (value is same as the height of the nav)
$('.block-type-navigation').addClass('fixed').css('top','0').next()
.css('padding-top','42px');
} else {
// when scroll up or less than aboveHeight,
// remove the “fixed” class, and the padding-top
$('.block-type-navigation').removeClass('fixed').next()
.css('padding-top','0');
}
});
});
</script>
CSS:
.fixed {
position:fixed !important;
left: 0;
text-align: center;
}
.fixed .block-content {
display: inline-block;
text-align: left;
width: 940px; /* This should be the width of your grid!!! */
float:none;
}
.fixed {
position:fixed !important;
left: 0;
text-align: center;
display: block !important;
}
It's driving me crazy so I'd appreciate ANY help!
Thank you!
If you don't want the nav to show unless the user has scrolled passed a certain point then couldn't it always be fixed just off the top of the screen:
.menu {
position:fixed;
top:-42px;
}
then shown or hidden by toggling a class
.menu.is-visible {
top:0;
}
using a scroll listener.
$win = $(window);
$win.on('scroll', function() {
$(".menu").toggleClass('is-visible', $win.scrollTop() > 42);
});
You could even add some CSS animation to the top property
.menu {
-webkit-transition: top 0.2s ease-in-out;
}
to get a cool transition.
Note: All this code is typed out right in here and not tested.
Note: You should definitely put a throttle on the scroll handler too.