Q. 1:
DomPDF table goes out of pdf from print report if table is wider
I am using dompdf and it works fine for small wider tables but it goes out of pdf page when it's too much wider so any solution is there I have looked at many places but couldn't find the solution.
Please find attach photo of issue:
Q: 2: Is Dompdf Support Bootstrap:
I have a bootstrap layout which doesn't seem supportable as I have added all required bootstrap css on top of the page but they are not working like hidden-xs which I really wanted to apply if the table is too wider then hide few columns like above Q-1 case.
Q: 3: Color not applied even specified in table inline Style:
Ok, so now my turn to explain how I did the code before Q-3 so I have one page called index.php where I have a table and all css styles on top. Now I specify table inside div like following:
<div id="htmlData"><table class="my bootstrap table"></table></div>
So now how I print things well I wrote one script on the same index.php page:
<script>function printout(){ $.ajax({ POST: '../dompdf/print_report.php' })}
Now this print_report.php file contain the code which will like the following:
Print_report.php:
<?php
require_once("dompdf_config.inc.php");
ob_start();
?>
<html>
<head>
<link href="**if I define any link path like http://bla.com/index.css - then it not work so I define styles on page level**" ....>
<link/>
</head>
<body>
<?php
echo $_POST['htmlData']; //which I send through ajax
?>
</body>
</html>
<?php
$html = ob_get_clean()
...rest of the code.....to print and save pdf to a file
?>;
However, Please help me out in this option as I believe DOMPDF is the best on net and I really don't want to lose using it so if anyone out there any help me than. Thanks a lot in advanced.
Related
I am looking for an easy way to insert content at the top of the <body> section in a WordPress plugin, and discovered that there is no core hook to do this, and I can't rely on modifying the theme. However there is a hook to insert in to the <head> section, and I discovered that if I insert the <div> into the <head> section rather than the <body>, all browsers I've tested will in fact move that content from the <head> to the top of the <body> section which is just what I want.
I know this fails W3C validation which is bad, on the other hand most sites have W3C validation errors. And more importantly, this trick works on Chrome, FF, IE, Safari, Android, and iPhone, Chrome mobile, Brave mobile, Ghostery mobile, to name a few places I've checked.
Will this kind of code cause problems in practice? Should I avoid doing this and find another way?
Run this HTML code and you'll see both DIVs in the body after the page renders:
<html>
<head>
<div>This is the head</div>
</head>
<body>
<div>This is the body</div>
</body>
</html>
And here's what you'll see in your browser:
Updated Answer
So you have some pretty strict requirements:
No theme editing (initiated via plugin)
No JavaScript insert (needs to be in initial DOM)
If you just need to have the element high on the page, you could stick it on a relatively early hook, and then move it after <body> with JavaScript.
If it needs to be one of the first things loaded, you probably could just stick it in the wp_head - making sure it's just got a really low priority so it makes quasi-semantic sense.
However you could also insert it with PHP using a real-time find and replace. You shouldn't suffer too much of a performance hit, but something like this would get you started:
function Danger_insert_iframe( $buffer ){
// Define your iframe
$iframe = '<iframe src="https://xhynk.com" style="width: 100%; height: 150px;"></iframe>';
// Match the first `<body>` tag
preg_match( '/(?:<body.*>)/U', $buffer, $matches );
// Return our buffer with iframe appended to the body match
return str_replace( $matches[0], $matches[0].$iframe, $buffer );
}
// An early hook with the DOM ready to fire on
add_action( 'template_redirect', function(){
ob_start();
ob_start( 'Danger_insert_iframe' );
});
What this does is matches the
<body [any class/js/data attributes here]>
and will then replace it with
<body [any class/js/data attributes here]><iframe></iframe>
Here's a Working Demo
It's not exactly elegant, but it will get the job done. The first thing that came to mind was a regex match for the body, but you may be better with another manipulation method like DOMDocument. For now though, this will get you started.
Original Answer:
While there's not really a *perfect* way to go about this, I would avoid _hacking_ a solution together. I've seen all sorts of strange things, including hooking in a `</head>` to `wp_head`, and directly inserting content like you've mentioned.
Your best best, and the most "accepted" way to do this, is to use a [Child Theme](https://codex.wordpress.org/Child_Themes). Ultimately, it will use the parent theme like the regular theme, but you can override parts of it with the child theme. This is *mostly* future-proof, unless the parent theme structure *radically* changes.
This gist of these would be to set up a blank Child Theme, and copy the `header.php` (or equivalent file) from the parent theme, and find the opening body tag, usually `<body <?php body_class(); ?>>`
Then, insert your own [`do_action()`](https://developer.wordpress.org/reference/functions/do_action/), so the new file will start with:
<body <?php body_class(); ?>>
<?php do_action('Danger_after_body'); ?>
Then create a `functions.php` file in the Child Theme and use that to deal with content on that hook.
add_action( 'Danger_after_body', 'Danger_insert_content' );
function Danger_insert_content(){
echo 'This Content is always after the <body> tag';
}
If this won't work for you (truthfully, it should except in a few instances), and you are just inserting simple content - you could just target the `body` with JavaScript and insert content that way.
You could also find the first hook that fires in your current theme and add high priority functions to that, but depending on the theme layout that can get messy and falls under the strange hack solutions I mentioned earlier.
I have a template withe several divs. now, i am confused on how to make a particular part editable and append it to another existing page.
E.g. I have a page which has been developed, I want to make the menu navigation, right bar, and footer menu editable such that i can append it to the already created page.
I have created an editable page, but its just adding the whole page to the new page making it look jam-packed.
How can i go about this?
Any help with steps will be appreciated
Thanks !
You could put your html into a php file, and then create the file that you want to append the code to a php file as well. then all you have to do is put:
<?php
include 'filename';
?>
Wherever you want the code to appear on the page.
Note, all html works in a php file as long as the html is not surrounded by the php tags.
For example you could do this
<html>
<title> Hello </title>
....other html here.....
<?php
include 'filename';
?>
</html>
But this wont work:
Hello
....other html here.....
include 'filename';
?>
I am making help content documentation for an already made software (the kind of which opens in every software when you press F1 or navigate to the Help section in the menu bar). I am using simple html/CSS/js pages to do so.
There is a ton of the same text descriptions of various software properties that appear in more than one page. The idea is to make a single text source file, where all the text descriptions are located and then use some sort of referencing to that specific text section wherever necessary.
Kind of a similar to using a CSS stylesheet to apply styles over all of the pages, only this handles text instead of styles. This way I would be able to change text in only one file and it would apply everywhere it is used.
I ran across the html SSI method, but this only includes the entire html page and not just a specific text section the way I would like to. I would strongly avoid using different file for each text section.
Can anyone please point me into the right direction here?
I think that you can make a JavaScript function that contains the common texts and use this functions in your code whenever you need them, for this the JavaScript that you create should be an external file and you can reference it in every html page you need it.
For example, you can have one function that returns "Hello World" and set this to a "p" element with the id="title". So in every page where you have an element with the id title you can call your JavaScript function to set its text to "Hello World". Use this link to find out more about this topic:
http://www.w3schools.com/js/js_htmldom_html.asp
UPDATE: I did a little test, i created the following JavaScript:
function helloTitle(){
var text = "Hello World!";
document.getElementById("title").innerHTML = text;
}
And referenced it in some HTML pages like this:
<script src="commonText.js" type="text/javascript"></script>
After that i only need to call the function in the element i want it to modify:
<p id="title"><script>helloTitle();</script></p>
This is a solution if you are only using JS, CSS and HTML. There should be other ways to achieve this.
Hope this information could help you!
I figured out how to do it a little more comforatbly on a large scale using the html command https://www.w3schools.com/tags/tag_iframe.asp
in your main html file you do:
<p> <iframe src="Text.html" width="100%" height="300" style="border:1px solid black;"> </p>
and then with some basic html formating insert whatever text u want
<html>
<body>
hmm idk what i should put here. Test
</body>
</html>
there will also be some css formatting needing to be done before it look perfect, but if you want to make multi line blocks I think this is the easiest way to.
Hi I wanna do something really simple: a multi-level template system using only HTML and JS.
I would have like to do that with HTML only, I tried with object and embed tags but I can't make it work properly (embed doesn't display and object generates a new HTML document with and , plus it's pretty ugly).
So, next I tried handlebars.js but I didn't manage to use it to put HTML from a file into another one.
I just want to separate the distinct components of my page into different HTML-like documents (but not full HTML-valid documents, just one with the header only, one with the navigation menu only, and so on). Then on "level 2" I would have a "structure" HTML-body document which would arrange the previous elements as I want (one structure could have a menu on the left, content on the right and a footer, another would have menu on top, full-size content and a header, etc. like the different themes of a CMS only much simpler). Then on "level 3" finally, my "real" pages would use a "structure" template and then I guess I should use something like handlebars to pass content, titles etc. to level 2 and again to level 1.
So, is there any easy way to do this? Without having to rewrite a whole JS library :P And if you think handlebars.js would suit my needs (but I really don't need dynamic parts, just a title and a content for each page, maybe something to handle the current position on the website to manage menus and breadcrumb), could you please tell me how to use it to include HTML from one file to another?
Thank you very much :)
EDIT
Well after a little bit of struggling, I dit it really easily with only jQuery. I'm really not familiar with javascript (but I'm still a little ashamed) here is the way to go :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$("body").load("structure.html", function() {
$("nav").load("nav.html");
$("section").load("section.html", function() {
$("section hgroup h1")[0].innerHTML = document.title;
});
$("footer").load("footer.html");
});
});
</script>
</body>
</html>
with structure.html containing just empty tags in the order you want them like this:
and section, nav and footer.html contining what should be inside the respective tags.
Wouldn't it be easier to simply use a couple iframes? Something like:
<html>
<body>
<iframe src="nav.html"/>
<iframe src="content.html"/>
</body>
</html>
Or am I misunderstanding your question?
I'm writing a page using HTML, CSS, jQuery and some PHP to run on my localhost. I use a separate stylesheet for printing. In print preview now, the content of the page's title tag
<html><head><title>THIS CONTENT</title>...
shows up on the page - How to get rid of it?
Many thanks in advance.
Try to send a text/html header from PHP. Add the following to the beginning of your file, before anything else is output to the browser:
<?php header("Content-Type: text/html"); ?>
I inserted
title { display: none; }
into the print.css and now it works. Thanks for your time, guys, didn't guess one would CSS-format header elements.
(How do I upvote Jukka's comment? It made me revisit the CSS thought and helped me solve this. #Jukka: Greetings from Helsinki)