Printing HTML and SVG together
I'm trying to do something that "should" be pretty simple. My program (Java, using SWT) has a button that, when clicked, opens a dialog box with a browser component. This component hits one of our web services using some custom input, and the returned html contains an inline SVG image and some basic html (a table in essence). Some examples of what it looks like is as follows (truncated for readability)
<!DOCTYPE html>
<head>
<style>
table { border-collapse: collapse; width: 100%;}
table, td, th { border: 1px solid black;}
svg { top:0; left:0; width:612px; height:450px; display:block; margin:auto;}
</style>
</head>
<body><h1><b>Sample Heading</b></h1>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 244.8 180" enable-background="new 0 0 244.8 180" xml:space="preserve" preserveAspectRatio="xMinYMin meet">
<!-- A whole lot of SVG commands here. -->
</svg>
<table border="1"><tr><th>Col1</th><th>Col2</th><th>Col3</th><th>Col4</th></tr>
<tr bgcolor="EDFEED"><td align="center">1</td><td>2</td><td>3</td><td>4</td></tr>
</table>
</body>
</html>
NOTE. The CSS line for SVG exists because I have been playing around with how to automatically adjust the size of the visual display on a web page. During my debugging / testing, this has been added / changed / removed several times in various forms.
NOTE 2: The size of the SVG viewport comes from the original SVG files that I am using. This is happening outside of my process.
This works fine for display in my dialog, but where I am having problems I want to allow my user to print the browser content with the print button at the bottom of the dialog (so they need to get the image at the top, scale perfectly to fill the page width while maintaining the aspect ratio with the more info table below.) If I make a Javascript call from SWT window.print();
it prints, but two quirks tend to arise.
First, if I leave that CSS line with the SVG changes, sometimes it ends up scrapping the page. I'm pretty sure it has to do with the fact that I'm doing something idiotic with SVG CSS styles that I can't figure out.
Second, it often ends up rewriting the top of the table element. This happens even if I remove the SVG CSS line that adjusts the image scale / size.
Also, if I right click in IE and select print-preview, it looks like at least "not overwriting the top of the table", but when it actually prints, the paper that is being produced does not match what the preview shows ... This behavior is consistent if I try it from outside my program in a normal IE window.
The HTML is generated dynamically when requested by the webservice, but if similar HTML is loaded in FireFox or Chrome, no error occurs (at least in my barebones testing). Our application will always work on a Windows PC and SWT is using IE (I'm using version 11 right now) under the hood, so I believe I am running into this issue. I'm not a web developer or CSS guru and I know enough to get myself into trouble, but I'm not sure how to fix this problem at the moment.
Any guide or others who have dealt with HTML / SVG printing with IE would be appreciated. Thank.
source to share
No one has answered this question yet
Check out similar questions: