Cant send non-english characters to PDF - node.js

I am having trouble rendering non-english characters in a pdf that gets generated as a blob using node.js and displayed in an iframe element.
First line and client Name is supposed to be cyrillic characters I am using fluentreports which mentions nothing about the character set that it can handle. Here is the code that receives the blob from my server.
if (xhr.status === 200) {
var file = new Blob([xhr.response], {type: 'application/pdf'});
var fileURL = URL.createObjectURL(file);
this.setState({
pdf: fileURL
})
}
});
xhr.send(formDataString);
}
render() {
return (
<div>
<div style = {{ margin: '0'}} className = "container">
<div className= "jumbotron">
{this.state.form ? <DateForm onChange = {this.handleChange} onChange2 = {this.handleChange2} onSubmit = {this.onSubmit} date1 = {this.state.date1} date2 = {this.state.date2}/> : null}
{this.state.pdf? <iframe style = {{width:"100%" ,height: "800"}} src = {this.state.pdf}> </iframe> : null}
</div>
</div>
</div>
);
}

To answer my own question and hopefully help someone else. Fluentreports allows to register fonts. I am generating my pdf on the server side so here is what needs to be done. Download Arial Unicode MS and from a static point, serve it to the location where you render your report as follows.
// Create a Report
var rpt = new Report(res,({fontSize: 10,font: 'Bulgarian'}))
.titleHeader(hh)
.margins(40)
.data( {}) // Add some Data (This is required)
rpt.registerFont("Bulgarian", {normal: './server/static/ARIALUNI.ttf'});

Related

Can not load data as external data from http get request when using amCharts

i'm working on a project and i found some issues that i don't know how to fix.
In fact, i'm using amMap and i want to load an external data coming from my API. I've a service class who get the url API and make the http get request. When i console.log() the result of the request i can see my data. But when i try to link the data by doing "polygonSeries.data = myResult" it doesn't show anything. To test it i try to display a tooltip on hovering the map.
Please could somebody help me?
NB: my english level is not high enough so, please don't pay attention on errors...
Thank you
//The service
getCovidGloblasDataCountries(): Observable<Country[]>{
return this.http.get<Country[]>(this.ApiEndPointCy);
}
//The typescript class
countriesList: Country[];
constructor( private covidService: CovidService) { }
// Setting the world map
setChart(): void{
var chart = am4core.create("chartdiv", am4maps.MapChart);
// Set map definition
chart.geodata = am4geodata_worldLow;
// Set projection
chart.projection = new am4maps.projections.Miller();
// Create map polygon series
var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
// Make map load polygon (like country names) data from GeoJSON
polygonSeries.useGeodata = true;
//Initialising the data
this.covidService.getCovidGloblasDataCountries().subscribe(data => {
this.countriesList = data;
console.log(this.countriesList);
});
// Add expectancy data
polygonSeries.data = this.countriesList;
// Configure series
var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.tooltipHTML = `
<div> <img src="{cyFlag}" alt="flag"> </div>
<div> <Strong>Pays : </Strong> {cyName} </div>
<div> <Strong>Cases : </Strong> {cyCases} </div>
<div> <Strong>Recovered : </Strong> {cyPopulation} </div>
<div> <Strong>Criticals : </Strong> {cyCriticals} </div>
<div> <Strong>Deaths : </Strong> {cyDeaths} </div>`;
polygonTemplate.fill = am4core.color("#999");
// Create hover state and set alternative fill color
var hs = polygonTemplate.states.create("hover");
hs.properties.fill = am4core.color("#367B25");

Display edited/styled text - react

I am building a web app for posting announcements. The user get to use a rich text editor, meaning he can make letters bold, underline them and so one. I am then saving this text with the description "content" in my mongodb database as a string. Every post has a title and a content. When i am displaying the post instead of showing "this text is strong" it is showing "< strong>this text is strong< /strong>". (added a space in < strong> cause it would make it strong otherwise. you get what i mean :P ) obviously this is not happening only in the strong case but with all the edits. for example in paragraphs its like this < p> paragraph < /p> and so on.
How can i display the content like its meant to be (styled) and not just as a string with no edits and style? Maybe it's the fact that i store it in my db as a string? but then what type should i store it as?
Posting images for reference
Allowing this is pretty dangerious, to be honest - you have to be EXTREMELY careful on what you allow and how you are sanitizing input (not allowing script tags, etc..)..
I wouldn't recommend doing this...
The reason this happens is because React is sanitizing the input for you (essentially turning any html into just a plain string - not true sanitization but you get the point)... if you want to render user input HTML, you have to use dangerouslySetInnerHTML - it must be presented in the following format: { __html: '<p>The Dangerous HTML</p>' }
const { useState, dangerouslySetInnerHTML } = React;
const { render } = ReactDOM;
function App() {
const [html, setHtml] = useState();
const handleChange = event => {
setHtml({ __html: event.target.value});
}
return (
<div>
<h3>Enter some html</h3>
<input onChange={handleChange} type="text" />
{html && <div dangerouslySetInnerHTML={html} />}
</div>
);
}
render(<App />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

Show the item hit content only when the search box is not empty

I have this in my algolia file for my jekyll site.
<script>
const search = instantsearch({
appId: '{{ site.algolia.application_id }}',
apiKey: '{{ site.algolia.search_only_api_key }}',
indexName: '{{ site.algolia.index_name }}',
searchParameters: {
restrictSearchableAttributes: [
'title',
'content'
],
facetFilters: ['type:post']
},
});
const hitTemplate = function(hit) {
let date = '';
if (hit.date) {
date = moment.unix(hit.date).format('L');
// date = moment.unix(hit.date).format('MMM Do YY');
modifiedDate = moment.unix(hit.last_modified_at).format('MMM Do YY');
}
const url = hit.url;
const title = hit._highlightResult.title.value;
const content = hit._highlightResult.html.value;
return `
<div class="post-list">
<span class="post-date-list-wrap">
<span class="post-date-list">${date}
<span class="post-title"> ${title} </span>
</span>
${content}
</div>
`;
}
const hitTemplateTrans = function(hit) {
let date = '';
if (hit.date) {
date = moment.unix(hit.date).format('MMM DD YYYY');
}
const url = hit.url;
const title = hit._highlightResult.title.value;
const content = hit._highlightResult.html.value;
return `
<div class="post-list">
<span class="post-date-list-wrap">
<span class="post-date-list">${date}
<span class="post-title"> ${title}</span>
</span>
</span>
</div>
`;
}
search.addWidget(
instantsearch.widgets.searchBox({
container: '#search-searchbar',
placeholder: 'search notes',
autofocus: true
})
);
search.addWidget(
instantsearch.widgets.hits({
container: '#search-hits',
templates: {
empty: 'No results',
item: hitTemplate
},
})
);
search.start();
</script>
Without typing anything in the search box I have the list of articles
with the excerpt, the short introduction of the article.
That's because I have ${content} to show the highlights when someone
types the search term.
That's fine and everything is working but... I don't want to show the contents of each item when the search box is empty.
If the search box is empty I would like to keep only the title and the date
but if the search box is not empty just show the title/date and the excerpt as it's usual.
It seems like an easy task but I'm stuck right now, I tried removed the content tag and put in the hit transformation function, but it doesn't work.
The instantsearch.js library has a function hook, called searchFunction, you can define when instanciating the library. That is called right before any search is performed. You can use it to check if the current query is empty or not, and adapt your layout based on this knowledge.
Here is a slightly edited script (irrelevant parts removed) that should let you do what you're looking for:
let additionalClass = '';
const search = instantsearch({
[…]
searchFunction: function(helper) {
if (helper.getState().query === '') {
additionalClass = 'post-item__empty-query';
} else {
additionalClass = '';
}
helper.search()
}
});
[…]
const hitTemplate = function(hit) {
return
`<div class="post-item ${additionalClass}">
[…]
</div>`
;
}
.post-item__empty-query .post-snippet {
display: none;
}
What it does is defining a global variable (additionalClass) that will be used in the hit template (added alongside item-post, at the root level).
Right before everysearch, we check if the query is empty. If so, we set additionalClass to item-post__empty_query. We also defined in CSS that when this class is applied, the content should be hidden.
All of that together makes the title + date displayed when no search is performed, and the content displayed only when an actual keyword is searched for.
Hope that helps,

What is this character "" and why does it cause a line break?

I'm using handlebars + hbs (following the block/extend helper example) to render html for my node application. For some reason, one of my div's is getting pushed down 1 line.
I checked the dom inspector in chrome, and there's a line with double quotes:
Which causes this:
When I remove the double quotes from the dom inspector (press backspace or delete) the layout is correct:
What the crap is going on? Is it a non-printing character or something? There's nothing in the html/template, and a blank space (or whatever character that is) shouldn't cause a block level element to change position, right?
Here's some code:
The relevant section of Layout.html
<div id="details" class="east">{{{block "east"}}}</div>
The template:
<div id="details-title">
<h3 class="title elide" style="height:26px;">{{Title}}</h3>
</div>
<div id="details-body" class="content text">
<img class="card" src="{{ImagePath}}" />
<div>
<span class="type">{{Type}}</span>
</div>
<div class="body">
{{{Body}}}
</div>
</div>
The block + extend helpers: (from the hbs example)
hbs.registerHelper("extend", function (name, context) {
var block = blocks[name];
if (!block) {
block = blocks[name] = [];
}
if (typeof context.fn !== "undefined") {
block.push(context.fn(this));
}
});
hbs.registerHelper("block", function (name) {
var val = (blocks[name] || [])
.filter(function () { return true })
.join("\n");
// clear the block
blocks[name] = [];
return val;
});
Update
Apparently, this is char 65279, my precompiled handlebars templates all emit this as the first character when rendered.
So I added a hack to remove the BOM that appears as the first character in the template output:
var html = detailTemplate(res.data);
if (html.charCodeAt(0) === 65279) { // hack to fix precompiled hbs template bug
html = html.substring(1);
}
$("#details").html(html);
It turns out that the block + extend helpers have nothing to do with the problem. I'm assuming it's a problem with the encoding I'm using, but I'm not sure how to change that. The above code fixes the issue though.
Solved, Save with Encoding > UTF-8

How to convert the RadEditor content to image

I have a radeditor,in that i have spans and a background image.I have some html input textboxes,on text changed of the textboxes,i'm binding the text to particular spans like:
<script>
function txtTitlechanged(x) {
var y = document.getElementById(x).value
var editor = $find("<%=RadEditor1.ClientID %>");
var oDocument = editor.get_document()
var img = oDocument.getElementById('span1');
if (y == '') {
img.innerHTML = 'UserName';
}
else {
img.innerHTML = y;
}
}
</script>
<input type='text' onchage="txtTitlechanged" />
Here i want that radeditor content as an image,i'm getting the radeditor content as html,but i want as it as an image.
You could search for a third party HTMLtoImage or XHTMLtoImage convertor and provide the generated content to it
OR
export the content to PDF using the built-in PDF exporting feature of RadEditor: http://demos.telerik.com/aspnet-ajax/editor/examples/pdfexport/defaultcs.aspx

Resources