I'm actually using node js and html-pdf lib to generate a pdf on the server which is return as a blob to the client. When I did it on my local machine everything is fine but when I upload it to the server and test it out. The text size increases when in production.
I've created a function that takes an object as a parameter:
async function generatePDF(object) {
let htmlContent = `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body,
html {
font-family: arial, sans-serif;
color: rgb(46, 46, 46);
}
</style>
</head>
<body>
<br />
Date: ${object.todayDate}
<div style="margin-top: 60px">
<h3 style="border-top: 1px solid black">Dr. ${object.name} ${object.firstname}</h3>
</div>
</html>
`;
Down below is the code to generate PDF from the HTML file created:
let sideMargin = "1.5cm";
var options = {
format: "A5",
border: {
top: "1.5cm", // default is 0, units: mm, cm, in, px
right: sideMargin,
bottom: "3.0cm",
left: sideMargin,
},
};
console.log(options);
var path = require("path");
var appDir = path.dirname(require.main.filename);
let date = Date.now();
let newPDF = `${appDir}/files/${date}new.pdf`;
let newHTML = `${appDir}/files/${date}new.html`;
htmlData["fileName"] = newHTML;
console.log(`Generating new PDF '${newPDF}`);
await generatePDF(htmlData);
var html = fs.readFileSync(`${newHTML}`, "utf8");
pdf.create(html, options).toFile(`${newPDF}`, function (err, res) {
if (err) return console.log(err);
console.log(res);
r.sendFile(`${newPDF}`, (error) => {
if (!error) {
fs.unlinkSync(`${newPDF}`);
fs.unlinkSync(`${newHTML}`);
}
});
});
The problem is that locally on my machine everything is fine, but online the text size of the PDF is way bigger, and instead of returning one page it's returning back two pages (of course the content I've set here in the HTML is not the result I want, it is just an example).
Hey i've found what was the problem,
there is no solution to this problem yet. The work around is to add
html {
zoom: 0.55;
}
to the CSS file/code
There's actually an open issue for this.
Related
Am trying to load Zingchart using JSON data retrieved from Webapi.
The sample data is like this
$scope.testValues = [{"text":"Sample1","values":"[465]"},{"text":"Sample2","values":"[288]"}];
But ZingChart is expecting the values to be..
[{"text":"Sample1","values":[465]},{"text":"Sample2","values":[288]}];
(Without quotes in the values*)
and because of this am getting a different output in UI as the chart is showing 2 or 3 times
Can you please let me know how to bind a JSON data from webapi to chart dynamically ?
This is simply a matter of of how you data is formatted. You can see the values array is string quoted like "[458]" which I assume is coming from php?
It doesn't really matter where its coming from, this is not a valid type for an array. Its a string with brackets inside so of course its showing up as NAN.
There are probably better ways to approach a solution, but this will work
1) Test it out:
console.log(JSON.parse(JSON.stringify($scope.testValues)))
2) $scope.testValues = JSON.parse(JSON.stringify($scope.testValues))
You have to replace the quotes before and after the brackets[] using:
var eventlist = JSON.stringify(testValues);
var eventstring = new String();
eventstring = eventlist.replace(/"\[/g, '[');
eventstring = eventstring.replace(/\]"/g, ']');
So your final code is:
var testValues = [{"text":"Sample1","values":"[465]"},{"text":"Sample2","values":"[288]"}];
var eventlist = JSON.stringify(testValues);
var eventstring = new String();
eventstring = eventlist.replace(/"\[/g, '[');
eventstring = eventstring.replace(/\]"/g, ']');
var myConfig = {
type: 'pie',
series: JSON.parse(eventstring)
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
.zc-ref {
display:none;
}
<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
</body>
</html>
I have 2 Dojo Dijit ContentPane's side by side. I want to show/hide one of them, and have the other one stretch dynamically as needed. I am using an ESRI mapping example which uses 'dijit.layout.BorderContainer'. The "divRightMenu" will show/hide itself correctly, but, when opened, rather than pushing the "mapDiv" Div, it just appears on top of it. I want the "mapDiv" div to dynamically resize itself depending on the visible state of the "divRightMenu" div.
I'm including the full page code below - I have already experimented with style.Display = Block / None, style.Visibility = Visible/Hidden, as well as trying to dynamically set the width of divRightMenu from 1 pixel to 150 pixels. In all cases, divRightMenu appears "on top of" mapDiv, rather than "pushing" it like I want. If I change the code so that divRightMenu is visible by default on page load, then what happens when i hide it is it disappears, but the blank spot it once occupied still remains. Surely this is something simple I'm missing?
In the past (standard CSS), I would combine "float:left/right" with "overflow:hidden", and display:block/none, and could easily achieve the effect I'm after, but with Dojo/Dijit i'm not sure what i'm missing. I experimented with various combinations of float/overflow on the inline styling of the 2 DIV tags in question, but was unable to get it to work. I also noted that one poster mentioned that he programmatically created his dijit ContentPanes on the fly to overcome the issue, but I was hoping for a solution other than this (i need all the settings from the div's content to be retained between showing/hiding the div, and i'm not sure if re-creating it on the fly will allow for this).
Here are the 2 threads I found that touch on the topic:
Dojo Toggle Hide and Show Divs
Toggling the display of a Dojo dijit
These mainly deal with being able to hide the div or not. In my case I'm able to hide/show it, but just not able to get the desired auto-resize behavior from the remaining DIV.
In any case, full code sample is included below - any help would be appreciated:
Main Index.htm Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="layout.css">
<link rel="stylesheet" type="text/css"href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.2/js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript">
var djConfig = {
parseOnLoad: true
}
function ToggleVisibility(id)
{
//if (dijit.byId(id).domNode.style.width == '150px') {
if (dijit.byId(id).domNode.style.display == 'block') {
dijit.byId(id).domNode.style.display = 'none';
//dijit.byId(id).domNode.style.width = "1px";
//dojo.style(id, "visibility", "hidden");
}
else {
//dijit.byId(id).domNode.style.width = "150px";
dijit.byId(id).domNode.style.display = 'block';
//dojo.style(id, "visibility", "visible");
}
dijit.byId(id).resize();
//dijit.byId("mapDiv").resize();
}
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.2"></script>
<script src="layout.js" type="text/javascript"></script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
</script>
</head>
<body class="tundra">
<!--TOPMOST LAYOUT CONTAINER-->
<div style="border:4px solid purple;width:100%;height:100%;" id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false">
<!--HEADER SECTION-->
<div id="header" style="border:4px solid red;height:85px;" dojotype="dijit.layout.ContentPane" region="top">
<div id="headerArea" style="border:2px solid black;height:50px;" dojotype="dijit.layout.ContentPane" region="top">Logo Here</div>
<div id="navMenuArea" style="border:2px solid green;height:35px;" dojotype="dijit.layout.ContentPane" region="top">Menu Here | <input type="button" onClick="ToggleVisibility('divRightMenu');" value="Toggle Right Menu"/></div>
</div>
<!--CENTER SECTION-->
<!--CENTER CONTAINER-->
<div id="mapDiv" style="border:2px solid green;margin:2px;" dojotype="dijit.layout.ContentPane" region="center"></div>
<!--RIGHT CONTAINER-->
<div id="divRightMenu" style="display:none;width:150px;border:2px solid orange;background-color:whitesmoke;" dojotype="dijit.layout.ContentPane" region="right">
Right Menu
</div>
<!--FOOTER SECTION-->
<div style="border:4px solid blue;height:50px;" id="footer" dojotype="dijit.layout.ContentPane" region="bottom">
Footer Here
</div>
</div>
</body>
</html>
layout.js Code:
dojo.require("esri.map");
var resizeTimer;
var map;
function init() {
var initialExtent = new esri.geometry.Extent(-125.0244140625, 14.4580078125, -80.0244140625, 59.4580078125, new esri.SpatialReference({
wkid: 4326
}));
map = new esri.Map("mapDiv", {
extent: initialExtent
});
dojo.connect(map, 'onLoad', function(theMap) {
dojo.connect(dijit.byId('mapDiv'), 'resize', function() {
resizeMap();
});
});
var url = "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";
var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer(url);
map.addLayer(tiledLayer);
}
//Handle resize of browser
function resizeMap() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
map.resize();
map.reposition();
}, 800);
}
//show map on load
dojo.addOnLoad(init);
layout.css Code:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color:#FFF;
overflow:hidden;
font-family: "Trebuchet MS";
}
#header {
background-color:#FFF;
color:#999;
font-size:16pt;
font-weight:bold;
}
#headerArea {
text-align:left;
}
#navMenuArea {
text-align:right;
/*background:url(toolbar_bg.png) repeat #6788a2;*/
}
#topmenu {
background-color:#FFF;
color:#999;
font-size:16pt;
text-align:right;
font-weight:bold;
}
#footer {
background-color:#FFF;
color:#999;
font-size:10pt;
text-align:center;
}
Use a dijit/layout/BorderContainer, place the 2 contentpanes inside it, setting one of the 2 containers' region property to "center" and the other one to "right".
When you want to resize one of the contentpanes, call their "resize" method with an object containing the "w" property.
After calling resize on the contentpane, call "layout" on the border container.
Example :
require([
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/Button",
"dojo/domReady!"
], function(BorderContainer, ContentPane, Button){
var container = new BorderContainer({
design : "headline",
gutters : false
}, "container");
var pane1 = new ContentPane({
region : "center",
id : "pane1"
});
var pane2 = new ContentPane({
region : "right",
id : "pane2"
});
var toolbar = new ContentPane({
region : "bottom",
id : "toolbar"
});
var btn = new Button({
label : "Change right side",
onClick : function(){
pane2.resize({ w : Math.random() * pane2.get("w") });
container.layout();
}
});
toolbar.addChild(btn);
container.addChild(pane1);
container.addChild(pane2);
container.addChild(toolbar);
container.startup();
});
See this fiddle : http://jsfiddle.net/psoares/vEsy7/
How can I display two Infowindow on my map.
in my code I can open only one InfoWindow, but I will display at same time twoo InfoWindow on my map what can I do. my code is:
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng( 38.736946, 35.310059), 6);
map.openInfoWindow(new GLatLng( 38.582526, 42.846680),
document.createTextNode("Van Gölü"));
}
}
The Google Maps API v2 native InfoWindow only supports one per map. The Google Maps API v3 removes that limitation.
Either use a custom InfoWindow or migrate your application to the Google Maps API v3.
As #duncan observed, that Google Maps API v2 has been officially deprecated as of May 19, 2010 and will not be supported after May 19, 2013. New development in that API is strongly discouraged.
this code is working :
<!DOCTYPE html>
<html>
<head>
<META http-equiv=content-type content=text/html;charset=x-mac-turkish>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script src="js/jquery.js"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=mykey&sensor=false">
</script>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(39.078908,35.244141),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
infoWindow = new google.maps.InfoWindow();
var windowLatLng = new google.maps.LatLng(38.668356,33.376465);
infoWindow.setOptions({
content: "Tuz Golu",
position: windowLatLng,
});
infoWindow.open(map);
infoWindow2 = new google.maps.InfoWindow();
var windowLatLng2 = new google.maps.LatLng(38.565348,42.868652);
infoWindow2.setOptions({
content: "Van Golu",
position: windowLatLng2,
});
infoWindow2.open(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:65%; height:40%"></div>
</body>
</html>
Do anyone of You guys know if it is possible to change default size of SmartPortal based on url (webpage) size? Default it is 1/3 of screen width and 250px height.
Is it possible to change it to take whole screen width and other height?
Mayby I must create a SmartPortal plugin for that or manipulate webpage DOM?
Any advice will be helpfull :)
I've figured it out (thanks to ShankarSangoli).
I used jQuery to modify iframe height.
Whole dashboard is just a html table, so using some selectors I was able to change iframe height.
This is my code:
<script type="text/javascript">
$(document).ready(function () {
//SmartPortal name
var SPname = 'Name of SmartPortal';
//function usage
resizeSP(SPname, 400);
});
function resizeSP(SP, size) {
$("table.TitleText td.TitleText:contains(" + SP + ")", parent.document).closest('#title-bar').parent().next().find('#contentNode').children(":first").css("height", size);
}
</script>
But there are some limitations!!! The html page used by SmartPortal must be in the same domain as Pivotal (JavaScript security limitations) so I saved my document on local drive and used relative URL in SP properties.
If You want to use webpage outside domain just create a html document containing iframe with target URL and load it into Pivotal.
Like this:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//SmartPortal name
var SPname = 'SP name;
//usage
resizeSP(SPname, 400);
});
function resizeSP(SP, size) {
$("table.TitleText td.TitleText:contains(" + SP + ")", parent.document).closest('#title-bar').parent().next().find('#contentNode').children(":first").css("height", size);
}
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
overflow: auto;
height: 100%;
}
iframe {
display:block;
width:100%;
border:none;
}
</style>
</head>
<body>
<iframe src="http://www.yoursite.com"></iframe>
</body>
I hope that it will be helpful for anyone :)
Below is my entire code from a User control that contains the YUI Uploader. Is there something I'm missing. Right now, when I step through the javascript code in Firebug, it hangs on the first line of the upload() function. I have a breakpoint on the first line of the ashx that handles the file, but it is never called. So, it doesn't get that far. I figure I'm just missing something stupid. I've used this control many times before with no issues. I'm using all the css files and graphics provided by the samples folder in the YUI download.
If I'm not missing anything, is there a more comprehensive way of debuging this issue then through stepping through the javascript with FireBug. I've tried turning the logging for YUI on and off, and never get any logs anywhere. I'm not sure where to go now.
<style type="text/css">
#divFile
{
background-color:White;
border:2px inset Ivory;
height:21px;
margin-left:-2px;
margin-right:9px;
width:125px;
}
</style>
<ajaxToolkit:RoundedCornersExtender runat="server" Corners="All" Radius="6" ID="rceContainer" TargetControlID="pnlMMAdmin" />
<asp:Panel ID="pnlMMAdmin" runat="server"
Width="100%" BackColor="Silver" ForeColor="#ffffff" Font-Bold="true" Font-Size="16px">
<div style="padding: 5px; text-align:center; width: 100%;">
<table style="width: 100% ; border: none; text-align: left;">
<tr>
<td style="width: 460px; vertical-align: top;">
<!-- information panel -->
<ajaxToolkit:RoundedCornersExtender runat="server" Corners="All" Radius="6" ID="RoundedCornersExtender1" TargetControlID="pnlInfo" />
<asp:Panel ID="pnlInfo" runat="server"
Width="100%" BackColor="Silver" ForeColor="#ffffff" Font-Bold="true" Font-Size="16px">
<div id="infoPanel" style="padding: 5px; text-align:left; width: 100%;">
<table>
<tr><td>Chart</td><td>
<table><tr><td><div id="divFile" ></div></td><td><div id="uploaderContainer" style="width:60px; height:25px"></div></td></tr>
<tr><td colspan="2"><div id="progressBar"></div></td></tr></table>
</td></tr>
</table>
</div></asp:Panel>
<script type="text/javascript" language="javascript">
WYSIWYG.attach('<%= txtComment.ClientID %>', full);
var uploader = new YAHOO.widget.Uploader("uploaderContainer", "assets/buttonSkin.jpg");
uploader.addListener('contentReady', handleContentReady);
uploader.addListener('fileSelect', onFileSelect)
uploader.addListener('uploadStart', onUploadStart);
uploader.addListener('uploadProgress', onUploadProgress);
uploader.addListener('uploadCancel', onUploadCancel);
uploader.addListener('uploadComplete', onUploadComplete);
uploader.addListener('uploadCompleteData', onUploadResponse);
uploader.addListener('uploadError', onUploadError);
function handleContentReady() {
// Allows the uploader to send log messages to trace, as well as to YAHOO.log
uploader.setAllowLogging(false);
// Restrict selection to a single file (that's what it is by default,
// just demonstrating how).
uploader.setAllowMultipleFiles(false);
// New set of file filters.
var ff = new Array({ description: "Images", extensions: "*.jpg;*.png;*.gif" });
// Apply new set of file filters to the uploader.
uploader.setFileFilters(ff);
}
var fileID;
function onFileSelect(event) {
for (var item in event.fileList) {
if (YAHOO.lang.hasOwnProperty(event.fileList, item)) {
YAHOO.log(event.fileList[item].id);
fileID = event.fileList[item].id;
}
}
uploader.disable();
var filename = document.getElementById("divFile");
filename.innerHTML = event.fileList[fileID].name;
var progressbar = document.getElementById("progressBar");
progressbar.innerHTML = "Please wait... Starting upload.... ";
upload(fileID);
}
function upload(idFile) {
// file hangs right here. **************************
progressBar.innerHTML = "Upload starting... ";
if (idFile != null) {
uploader.upload(idFile, "AdminFileUploader.ashx", "POST");
fileID = null;
}
}
function handleClearFiles() {
uploader.clearFileList();
uploader.enable();
fileID = null;
var filename = document.getElementById("divFile");
filename.innerHTML = "";
var progressbar = document.getElementById("progressBar");
progressbar.innerHTML = "";
}
function onUploadProgress(event) {
prog = Math.round(300 * (event["bytesLoaded"] / event["bytesTotal"]));
progbar = "<div style=\"background-color: #f00; height: 5px; width: " + prog + "px\"/>";
var progressbar = document.getElementById("progressBar");
progressbar.innerHTML = progbar;
}
function onUploadComplete(event) {
uploader.clearFileList();
uploader.enable();
progbar = "<div style=\"background-color: #f00; height: 5px; width: 300px\"/>";
var progressbar = document.getElementById("progressBar");
progressbar.innerHTML = progbar;
alert('File Uploaded');
}
function onUploadStart(event) {
alert('upload start');
}
function onUploadError(event) {
alert('upload error');
}
function onUploadCancel(event) {
alert('upload cancel');
}
function onUploadResponse(event) {
alert('upload response');
}
</script>
It seems that there is a case mismatch in the name of the progressbar variable: you refer to it as progressbar everywhere else, but as progressBar in the upload() function.
An even bigger problem is that you define the progressbar variable inside the onFileSelect function. Because of that, the variable is limited in scope and should not be accessible anywhere else.
See if moving the definition for progressbar out of there (or freshly grabbing it from the DOM everywhere it's used by using getElementById) and fixing the case mismatch solves your issues.
YUI 2.8 has issues with events and the uploader. It won't work unless you use 2.9 event and uploader. I wasted more time than I want to admit trying to get 2.8 to work. I hope this saves someone that time.