Is there a way to send a print command to my printer for printing a tabular data in react js. Sorry if the question sounds silly because I am new to this. Thanks in advance.
Call window.print() function.
print(){
window.print();
}
call this function when you want to print your current screen or component
Triggering the browser's native print behavior is quite simple: just call a window.print() in your code.
Then your page will be printed as it is, so commonly you should provide a CSS spefic for the print media.
You have two way:
add a separate CSS like <link rel="stylesheet" href="css/style.css"/>
include a #media print in your existing CSS:
#media print {
…
}
What you should put inside your CSS? Whatever you need to fix your styles, commonly a lot of display: none rules to hide elements you don't want to print.
Final thoughts:
print from HTML is not much cross-browser: some browsers print better than other
printing HTML tables is full of caveats, for example take a look at: Repeat table headers in print mode
Related
I'm a new user of TinyMCE, and i'm trying to incorporate it in my React App. But i'ma actually getting an output problem. When try "format:text" in the tiny component, and try to create a post in my blog using bold and italic options, when the post is posted, the displayed text is just normal, without bold or italic properties. So, I've tried the "format:html" but in this case, I get my text without any styles at all, AND we see the <p> balises.
So, it can looks like a stupid question but, how do we output the posted text correctly ?
As always, thx in advance !
This happened to me as well. If you do not want to see the attributes on your output then go to the React Component which is responsible for output and in your React component when you use the return() keyword you should create a div use the
dangerouslySetInnerHTML attribute inside.
Example:
Here's [a link] (https://blog.logrocket.com/using-dangerouslysetinnerhtml-in-a-react-application/)
I am getting what I am assuming is json data from a wordpress blog endpoint like so:
https://example.com/wp-json/wp/v2/posts
I am looping through and showing the tiles for now:
<div>{posts && posts.map((post) => <h1>{post.title.rendered}</h1>)}</div>
But the post titles are not displaying properly. For example the word Don't shows Don’t
I have discovered that I can use dangerouslySetInnerHTML to fix this issue but is it safe? The fact that it has the word 'dangerously' in it is worrying.
I believe dangerouslySetInnerHTML is the way to go about this - but I will go into more detail as to why "dangerously" is in "dangerouslySetInnerHTML" and hopefully that will help you make an informed decision for your situation.
What dangerouslySetInnerHTML does is render any HTML string given to it within the DOM element.
For example:
<h1 dangerouslySetInnerHTML={{__html: post.title.rendered}} />
(as an aside, note the __html key has two underscores)
Will properly render the string Don’t to Don't.
This is all pretty harmless, however, if, for example, the value of post.title.rendered could be set by an untrusted party (such as an arbitrary user), and if this arbitrary user wanted to do some damage, they could enter a string such as:
<script type="text/javascript>
// Do evil stuff
console.log('I did some evil stuff');
</script>
This code would then be executed by the browser when the page loads - because React would have generated the following DOM:
<h1>
<script type="text/javascript>
// Do evil stuff
console.log('I did some evil stuff');
</script>
</h1>
So with all that in mind, if you are sure that the value of this field is within your control (and not anyone else's) and you also know that there will not be any arbitrary code in these strings, then go ahead and use dangerouslySetInnerHTML.
However, if there is the possibility that someone besides yourself could manipulate this field, I would instead look to something like decode-html-entities - this way you can have the presentation you want, without compromising your app/users.
I have an Angular JS single-page application used for reporting. I would like to print the report as rendered client-side to PDF format, taking into consideration certain elements users may have dynamically shown or hidden.
Is there anyway to achieve this?
Add class to div no-print
and css,
#media print {
.no-print{
display:none;
}
}
and print using,
javascript:window.print()
I have a responsive site that uses the google translate widget. The weird thing is that for some time the widget now appears twice, and this seem to be related to the responsive design because if I place the same widget code on a simple html page it only appears once. I have no idea on how to solve this. Has anyone come across this?
Update.
I have discovered that this is caused by jquery.themepunch.showbizpro.min.js, if I remove that one the widget only appears once. I have not found a way to fix this yet but there might be a way. I found this piece of code.
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement(
{ pageLanguage: 'sv' },
'google_translate_element'
);
/*
To remove the "powered by google",
uncomment one of the following code blocks.
NB: This breaks Google's Attribution Requirements:
https://developers.google.com/translate/v2/attribution#attribution-and-logos
*/
// Native (but only works in browsers that support query selector)
if(typeof(document.querySelector) == 'function') {
document.querySelector('.goog-logo-link').setAttribute('style', 'display: none');
document.querySelector('.goog-te-gadget').setAttribute('style', 'font-size: 0');
}
//If you have jQuery - works cross-browser - uncomment this
jQuery('.goog-logo-link').css('display', 'none');
jQuery('.goog-te-gadget').css('font-size', '0');
}
</script>
This code remove the logo, so I'm thinking that if I use javascript I could check and remove duplicate occurrences of <select class="goog-te-combo"> then I would only have one left, is that possible?
This happened to me using Bootstrap. I had two instances of the Google Translate code - one instance for larger screen sizes and another that was only visible for smaller screens. Both showed up regardless of screen size. Bootstrap classes like visible-xs and hidden-xs do not seem to affect the display of the Google Translate button.
You can set a global counter and make sure it's only called once.
<div id="google_translate_element"></div>
<script type="text/javascript">
var duplicate_google_translate_counter = 0;//this stops google adding button multiple times
function googleTranslateElementInit() {
if (duplicate_google_translate_counter == 0) {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
duplicate_google_translate_counter++;
}
</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
Had the same problem on RoR. Problem caused by cashing pages with turbolinks. I solved it with deprecating cashing all links in (when script loading it adds attr "data-turbolinks="false" to the body-tag)
Hello to all! I had the same issue and I KNOW is not the best practice but I fixed it with CSS just adding overflow: hidden and a right border on it.
It visually fix the problem until we get a solution and really saved time diving into JS files. Hope it works for you too. Cheers!
I'm creating a custom theme (as a n00b). Basically, I display content on the main page as small div blocks.
my node.tpl.php looks something like this:
<div class="content-block">
default node.tpl.php stuff here
</div>
This works OK on the front page. However, when I click "Read More," to take me to the full article page, /node/[nodeId], obviously, it still shows as the little CSS content-block div.
I'd like to show the full article using a different CSS class. What's the best way to do this?
Yes, there are some best ways to accomplish that.
First of all I am not sure, whether you are using separate front page tpl or not. If not then please try to use page--front.tpl.php. Where you can provide your desired format to create the proper front page. Why this is needed, cause you won't need to modify the node.tpl.php file. So inside this front tpl file you can put your desired code.
<div class="content-block">
default node.tpl.php stuff here
</div>
Also you can use the Panel module to create a front page. So you won't be needed to modify the nope tpl file. Always try to avoid modifying tpl file. Panel module makes it easier.
Secondly, you should not touch the node.tpl.php file. Once you will modify the file, you won't be able to re-define as default. So keep that as it is and revert back it to the default file. Now if you send some article link, it won't break.
So this is it. If this helps you, then please like :)
Keep Drupalizing :)