I am already successfully converting HTML to PDF using iTextSharp/XMLWorkerHelper. So far, I have been able to apply internal styling to the HTML as shown below. This works just fine. However, when I try to use a CDN to utilize Font Awesome, I am having no such luck.
This is what my HTML looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
body {
color: #000000;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<i class="fa fa-briefcase"></i>
</body>
</html>
And this is how I'm converting the HTML to a memory stream which is ultimately used to create the PDF via FileStreamResult (the FileStreamResult is closing the memory stream).
string html = "<html here>";
var ms = new MemoryStream();
using (var doc = new Document())
{
using (var writer = PdfWriter.GetInstance(doc, ms))
{
doc.Open();
using (var srHtml = new StringReader(html))
{
XMLWorkerHelper.GetInstance().ParseXHtml(writer, doc, srHtml);
}
writer.CloseStream = false;
doc.Close();
}
}
Why am I not able to see the briefcase on my generated PDF?
Related
Size reduction code working well in localhost but when i test it live my pdf page showing blank with this code ($dompdf->getOptions()->setIsFontSubsettingEnabled(true);)
and when i remove above line ..pdf is working fine but size is 18MB.i want to reduce my pdf size to 50KB with this same font family.
$html = '<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type: application/pdf; charset=utf-8"/>
<link rel="stylesheet" href="style.css">
<div style="width:800px; height:970px; padding:20px; border: 10px solid #787878">
<style>
body {
body {font-family: "NotoSansCJKtc-Regular"}
}
</style>
<div style="width:750px; height:915px; padding:20px; border: 5px solid #787878">
//pdf content is here
</div>
</div>
</html>';
$dompdf->loadHtml($html);
$dompdf->setPaper('A4', 'landscape');
$dompdf->getOptions()->setIsFontSubsettingEnabled(true);
/* Render the HTML as PDF */
$dompdf->render();
header('Content-Type: application/pdf; charset=utf-8');
header('Content-disposition: inline; filename="' . $no . '.pdf"', true);
/* Output the generated PDF to Browser */
$dompdf->stream();
I'm using play2-pdf to generate pdf in my application I created firstly the cover page but when I try to add the other pages its added in the same pdf page how can I create multiple pages in the same pdf document also I'm trying to add a footer to the my first page but still have the same problem
<html>
<head>
<style>
p.serif {
font-family: "Times New Roman", Times, serif;
}
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
this is a test
<div style="position:absolute; bottom:0;right:0;margin:24px;">by bSuccess</div>
</body>
</html>
For headers and footers, you can use css paged media module (https://www.w3.org/TR/css3-page/)
Example:
<html>
<head>
<style>
##page {
##bottom-right {
content: "by bSuccess";
font-size: 14px;
}
}
</style>
</head>
<body>
this is a test
</body>
</html>
For page breaks, you can use css page break properties (https://css-tricks.com/almanac/properties/p/page-break/)
Example:
<html>
<head>
<style>
##page {
##bottom-right {
content: "by bSuccess";
font-size: 14px;
}
}
</style>
</head>
<body>
<div>this is a test</div>
<p style="page-break-after:always;"></p>
<div>testing page break</div>
</body>
</html>
I generate pdf from xhtml file but font style is differs with XMHTL.
Here is Java Code
ITextRenderer renderer = new ITextRenderer();
renderer.getFontResolver().addFont("C:/Windows/Fonts/times.TTF", BaseFont.IDENTITY_H, BaseFont.NOT_EMBEDDED);
renderer.setDocument(urlXhtmlFile);
renderer.layout();
renderer.createPDF(os);
os.close();
How to set font style of pdf and html is same (color). Thanks!!!
You should add CSS into your XHTML, there you can manipulate with font size, color etc (change font properties according to your needs):
<html>
<head>
<style type="text/css" media="print">
body {
font-family: "Times New Roman", Times;
font-size: 10pt;
color: blue;
}
</style>
</head>
<body>
</body>
</html>
Also, I suggest you embed font into PDF, as someone opening this PDF without this font installed would not see PDF properly.
I'm confused as to where exactly place the script tags in my Rails app to have a Google map embed in a page. I'm following the directions from the Google API https://developers.google.com/maps/documentation/javascript/tutorial
The code looks like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAK04aYSxZArPElFFZfo3o2p-CbviPzfhc&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
I'm placing the first script tag within my application.html.erb file like so:
<%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?key=AIzaSyAK04aYSxZArPElFFZfo3o2p-CbviPzfhc&sensor=false" %>
I have a Venue model and a venues controller.
I want the map to appear in the Venues show action. So I place the second script inside venue.js. My show.html.erb looks like this:
<div class="center">
<h1><%= #venue.name %></h1>
<address><%= #address %></address>
<div id="map-canvas"/>
</div>
But no map appears when I load this page.
A very easy way to do this is to simply embed the map in an iframe. Using .haml for markup,
%iframe.google-location{ frameborder: '0', scrolling: 'no', src: 'https://www.google.com/maps/embed/v1/place?q=place_id:{google_generated_placeId}' }
the class 'google-location' (or whatever you want to name it) only needs to have the size of the iframe.
(make sure to have a valid api key)
I am building a sample MVC4 web application, my aim is to learn and master working with the Bing Maps API, but I'm afraid it is not going well.
I am following this tutorial, but when I reload my page, I do not get a map, where the map is suppose to show, I just see blank background colour ! even after getting the API Key, and putting it into the script on my page ! No map is showing !
Here is my script code:
<script type="text/javascript">
var map = null;
function getMap()
{
var boundingBox = Microsoft.Maps.LocationRect.fromLocations(new Microsoft.Maps.Location(47.618594, -122.347618), new Microsoft.Maps.Location(47.620700, -122.347584), new Microsoft.Maps.Location(47.622052, -122.345869));
map = new Microsoft.Maps.Map(document.getElementById('myMap'), { credentials: 'MyKeyGoesHere', bounds: boundingBox });
}
</script>
There are several things to consider in your implementation.
Add the script reference to the Bing Maps API
Add the HTML element and required information in your web page
Add the load event and fire your getMap() method (using an onload event set on the body or dynamicaly by code)
See the MSDN to help you in your first implementation:
http://msdn.microsoft.com/en-us/library/gg427624.aspx
Here is a sample static page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" charset="UTF-8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0">
</script>
<script type="text/javascript">
var map = null;
function getMap() {
var boundingBox = Microsoft.Maps.LocationRect.fromLocations(
new Microsoft.Maps.Location(47.618594, -122.347618),
new Microsoft.Maps.Location(47.620700, -122.347584),
new Microsoft.Maps.Location(47.622052, -122.345869));
map = new Microsoft.Maps.Map(
document.getElementById('myMap'),
{
credentials: 'YOURKEY',
bounds: boundingBox
});
}
</script>
</head>
<body onload="getMap();">
<div id="myMap" style="position: relative; width: 800px; height: 600px;">
</div>
</body>
</html>