I'm using phantomjs to render pdf with header and footer. Adding header and footer is implemented in all pages. Is there any way to remove header/footer from 1st page alone?
header: {
height: "1cm",
contents: phantom.callback(function(pageNum, numPages) {
return "<h1>Header <span style='float:right'>" + pageNum + " / " + numPages + "</span></h1>";
})}, footer: {
height: "1cm",
contents: phantom.callback(function(pageNum, numPages) {
return "<h1>Footer <span style='float:right'>" + pageNum + " / " + numPages + "</span></h1>";
})}
While not perfect, I return and empty string instead of actual html content when pageNum is equal to 1 (or to numPages in my case). The height is still occupied but at least its empty.
Related
I have a GeoJSON feature collection of points assigned to lat/long coordinates, and i want to be able to assign them variable colors based on the value of a specific feature property.
I have seen examples creating creating chloropleths for different layers, but have not seen an example for imported points.
Using the layout, this is my getcolor function for values within a certain range of a specific feature property
$.getJSON("LRV_NoUTEP.geojson", function (data) {
// add GeoJSON layer to the map once the file is loaded
function getColor(d) {
return d < 0 ? "#a6cee3" : d < -50 ? "#1F62FF" : "#001C5C";
}
This is my geoJSON layer creating the points, and also creating a popup with all of the information, which works fine on its own.
L.geoJson(data, {
pointToLayer: function (feature, latlng) {
return new L.CircleMarker(latlng, {
radius: 10,
fillOpacity: 0.85,
color: getColor(feature.properties.anomalymgals),
});
//var marker = L.circleMarker(latlng, geojsonMarkerOptions);
},
onEachFeature: function (feature, marker) {
marker.bindPopup(
"<b> Latitude: </b>" + feature.properties.lat + "<br/>" +
"<b> Longitude: </b>" + feature.properties.long + "<br/>" +
"<b> Easting: </b>" + feature.properties.easting + "<br/>" +
"<b> Northing: </b>" + feature.properties.northing + "<br/>" +
"<b> Elevation_meters: </b>" + feature.properties.elev + "<br/>" +
"<b> Anomoly_mgals: </b>" + feature.properties.anomalymgals
);
},
}).addTo(mymap);
});
edited
<title>Leaflet </title>
<link type = "text/css" rel="stylesheet"
href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css"/>
<link rel="stylesheet" href = "comcat.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/iconfamily=Material+Icons|Merriweather:400,400italic,700|Source+Sans+Pro:400,300,700"/>
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet-src.js">
</head>
<body>
<div id="map" style="width: 600px; height: 400px;"></div>
<script>
//load the image
var mymap = new L.map('map', {
layers: [
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
maxZoom: 19,
attribution: '',
id: '',
})
],
}).setView([44, -114.5], 9);
I can't seem to get the circle marker to return with new values, or anything at all when i introduce the getcolor function. What am I doing wrong? or is there a problem with formatting the way the function is is called on.
I found out what my problem is, when plugging all of my information into plunker, I am able to do it successfully. I am fairly new to using plunker, but it seems when i attempt to input the information into an existing html document, it seems to have a problem. I guess this turns into a general issue, where you are able to create a webpage, with a section just for a map followed by text. How should i go about doing this?
I have an image that i am binding the source to pull in dynamic data:
<img :src="'/public/images/' + media.client.name + '_' + media.client.id + '/' + media.type + '/' + media.fileName + '.' + media.ext " alt >
The media.client.name returns a string that has %20 instead of spaces.
I have created a filter:
removeSpecial(value) {
return value.replace("%20", " ");
}
How can I use this filter in the data binding of source please?
I have tried:
<img :src="'/public/images/' + media.client.name | removeSpecial + '_' + media.client.id + '/' + media.type + '/' + media.fileName + '.' + media.ext " alt >
and
<img :src="'/public/images/' + {{ media.client.name | removeSpecial }} + '_' + media.client.id + '/' + media.type + '/' + media.fileName + '.' + media.ext " alt >
Neither seem to work unfortunately.
You can make method which will return prepared url computed method like this:
imageUrl(media){
return '/public/images/' + media.client.name.replace("%20", " ") + '_' + media.client.id + '/' + media.type + '/' + media.fileName + '.' + media.ext;
}
Or if media is assigned in data you can use computed method which will return you same url
computed: {
imageUrl(){
return '/public/images/' + this.media.client.name.replace("%20", " ") + '_' + this.media.client.id + '/' + this.media.type + '/' + this.media.fileName + '.' + media.ext;
}
}
That would depend on how you want to decode the URI component. If this media data is populated dynamically (I suppose so), you could make a method for parsing and decoding it (see example below). If you need this decoder as a filter, however, here's an excerpt from the docs:
Filters should be appended to the end of the JavaScript expression, denoted by the "pipe" symbol.
So your best bet is probably to use a computed property so you can "pipe" it. And yes, you could utilize the native method decodeURIComponent() for this exact purpose.
Approach #1: Method only
new Vue({
el: '#app',
data() {
return {
rootPath: '/public/images/',
media: {
client: {
name: 'Music%20file%20with%20spaces',
id: 123
},
type: 'music-file',
fileName: 'some_music',
ext: 'mp3'
}
}
},
methods: {
getImgSource(media) {
// Destructures the properties for improved readability.
const { client, type, fileName, ext } = media;
const { name, id } = client;
// Uses template literals. Particularly useful for this situation
// where you have several, unique delimiters.
// Helps you see clearer how each of these URI components is combined.
return `${this.rootPath}${decodeURIComponent(name)}_${id}/${type}/${fileName}.${ext}`;
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<!-- Commented out for demo purposes, because I don't have the file.
<img :src="getImgSource(media)" :alt="media.fileName" /> -->
<!-- Let's assume this is an image element -->
<div v-text="getImgSource(media)"></div>
</div>
Approach #2: Computed property + filter
new Vue({
el: '#app',
data() {
return {
rootPath: '/public/images/',
media: {
client: {
name: 'Music%20file%20with%20spaces',
id: 123
},
type: 'music-file',
fileName: 'some_music',
ext: 'mp3'
}
}
},
computed: {
mediaFile() {
const { client, type, fileName, ext } = this.media;
const { name, id } = client;
return `${this.rootPath}${name}_${id}/${type}/${fileName}.${ext}`;
}
},
filters: {
decodeName: window.decodeURIComponent
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<!-- Let's assume this is an image element -->
<div>{{ mediaFile | decodeName }}</div>
</div>
Hope that helps.
I have a WebView in my project. It can have dynamic html content. For now i have given fixed width and height to WebView and it scrolls. But i want to remove scroll by increasing height of WebView dynamically.
Is there any way like by creating custom renderer or something?
Sample code
var webvw = new Webview();
var htmlSource = new HtmlWebViewSource();
htmlSource.Html = #"<html>" +
"<head>" +
"<style type=\"text/css\">" +
"#font-face {" +
"font-family: Roboto-Medium;" + fntsrc + "}" +
"html,body{margin:0px;}" +
"body {" +
"font-family: Roboto-Medium;" +
"font-size: 12px" +
"text-align: left;" +
"color: #acacac;" + "}" +
"body :first-child{" +
"font-family: Roboto-Medium;" +
"font-size: 12px" +
"font-weight: 300;" +
"line-height: 24px;" +
"text-align: left;" +
"color: #ffffff;" + "}" +
"</style>" +
"</head>" +
"<body style=\"background-color: transparent;\" >" +
dynamicContent + "</body>" + "</html>";
webvw.Source = htmlSource;
webvw.WidthRequest = 500;
webvw.HeightRequest = 500;
SatackLayout webContnet=new StackLayout{
VerticalOptions=LayoutOption.FillAndExpand,
Orientation=StackOrientation.Vertical
};
There is a way but it is complicated. The WebView won't automatically size to its content, so the only way you could do it is if the content notifies your code how big it is.
To do this you will need to Invoke C# from Javascript.
Its a mildly complex procedure and you will need a CustomRenderer and also setup properties in each of the native projects. Follow the link above for a step by step guide on how to do it.
The Javascript you invoke something like this to get the height
var body = document.body,
html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
Then when its returned back, set your WebView to that height. You may also need to wait until the NavigationCompleted Event is raised before doing this to ensure the contents have loaded in your WebView.
ok here is my "if it looks stupid but works it ain't stupid"-answer.
i run into the same problem and searched for a way to get the possible height.
my solutions is now to create a lable with costum renderes to convert the html code. the label has a property for height and width ;)
so i create the label, put it in a StackLayout(it needs to be rendered), get the size to the WebView, remove the label from the StackLayout and add now the WebView with a perfect size :)
webView = new WebView();
var htmlSource = new HtmlWebViewSource();
htmlSource.Html = htmlCode;
webView.Source = htmlSource;
tmpLable = new HyperLinkLabel {
Text = htmlCode,
};
stackLayout.Children.Add(tmpLable);
webView.WidthRequest = tmpLable.Width;
webView.HeightRequest = tmpLable.Height;
stackLayout.Children.Remove(text);
stackLayout.Children.Add(web);
this is action links code in mvc 5. I need to add images instead of text. how to do it
#Html.Raw("<a onclick='MergeCustomer(" + item.customer_id + ", " +
TempData["NewCustomerID"] + ")'>Merge</a>")
<span style=" color:black">|</span>
#Ajax.ActionLink("Compare", "_CompareCustomerDetails",
new { ExistingCustomerId = item.customer_id, NewCustomerId = TempData["NewCustomerID"]},
new AjaxOptions()
{
HttpMethod = "Get",
UpdateTargetId =divCustomerCompare",
InsertionMode = InsertionMode.Replace
}, new { id = "lnkCompare"})}
You can't. #Html.ActionLink only works on text.
In this instance your best bet is to use the #Url.Action() helper method, like so:
<img src="yourimage.jpg"/>
How can I set page header and footer using phantomjs with node, basically I'm generating pdf from html and I'm willing to add my header and footer from node, I have tries with following but pdf is not showing any data, and I'm reading empty page and willing to add header and footer, here is my Code:
// Load ejs template
fs.readFile(__dirname + '/../pdf' + pdfpath, 'utf8', function (err, data) {
// Render the page to variable.
var html = ejs.render(data, pdfJSON);
// Set this html as the content for the pdf file.
page.set('content', html);
page.set('generatePDF', function (pageNum, numPages) {
if (pageNum == 1) {
return "";
}
return "<h1>Header <span style='float:right'>" + pageNum + " / " + numPages + "</span></h1>";
});
page.set('paperSize', {
width: 1200,
height: 1500,
header: {
height: "1cm",
contents: phantom.generatePDF
}
});
console.log(phantom.generatePDF);//return undifned
page.set('paperSize', {
width: 1200,
height: 1500
});
// Generate the pdf.
var fileName = __dirname + '/pdfdata/' + f.formType + f.formId + '.pdf';
page.render(fileName, cb);
});
How I can resolve this?
Take a look to these example:
https://github.com/ariya/phantomjs/blob/master/examples/printheaderfooter.js
Edit: Sorry, didn't noticed you asked for Node, you can find some solutions and answers here also:
Footer's contents don't seem to work