Develop Reference

Avoid prefixing img src for data:image url #ionic-native/google-maps

I have an Ionic Cordova application running on both iOS and Android with Angular. I use the #ionic-native/google-maps plugin to display a map along with different kind of markers. Until now, I have only used static markers from .png files which works perfectly and expected.
However, I have come to a point where I want the users to see other markers that are dependent on a state in the code. To solve this, I have created a SVG template as a string where I replaces some value to reflect the parameters I want to be displayed. I then perform some regex on the string to to encode it correctly (similar to XMLSerializer.serializeToString()) before base64 encode it and prefixing with data:image/svg+xml;base64,. This way, I have an data URL to be used with the src tag in the marker img attribute through the Marker's MarkerOption icon url property which result in:
const icon = { url: 'data:image/svg+xml;base64,PD9 (...)', size: { width: 38, height: 40 }, anchor: [0, 40] }
const marker: Marker = this.map.addMarkerSync({
icon,
(...)
})
According to the cordova-plugin-googlemaps documentation (see here), this is a valid way to specify an icon for a marker. However, Ionic tries by default to fetch this url from http://localhost:8100 which naturally will fail. I end up with the following error message in console:
map_0_24694408793: "Can not load image from 'http://localhost:8100/data:image/png;base64,Pd9 (...)'
I have tried different approaches as well without any results. Such as file://, /, // and window.Ionic.WebView.convertFileSrc() (as for normal files). I have also tried to input the url directly to the icon parameter: icon: icon.url
Is there by any chance possible to tell Ionic not to look for that source when it contains an data:image URI that I have overlooked?
Versions:
#ionic-native/google-maps: 5.5.0
cordova-plugin-googlemaps: 2.7.1
Ionic CLI version: 6.16.3
Ionic Framework: #ionic/angular 5.2.3
Cordova Platforms: android 9.1.0, ios 6.2.0
angular: 9.1.6

JsPDF Html module producing unusable PDFs [ReactJS]

I'm trying to generate a PDF from a React component. In my scenario it is a MaterialUI table but it could be anything.
The problem I'm facing is not with generating the PDF but the produced PDF itself which is too heavy and unusable.
I have a function like this:
createPdf = async (html: HTMLElement, pdfName: string = "report.pdf") => {
const doc = new jsPDF("p", "pt", "a4", true);
await doc.html(html, {
margin: 10,
html2canvas: {
scale: 0.65
},
});
doc.save(pdfName);
return doc.output("blob");
};
I insert an HTMLElement which is the DOM content for my React component and it generates the PDF correctly. However this pdf is very big and extremely slow to load. Mind that I have an i9 with 32GB of RAM and it easily takes 15secs to render one page of the pdf...
Initially it was generating a 150MB pdf but then I set compressed to true and it's now around 600KB. That changes the size but it didn't improve the performance somehow. I've tried multiple computers and browsers and I've tinkered with the options for html2canvas and nothing seems to fix this.
Does anyone have any insight on this?
Thanks in advance.

Localization of static HTML with i18next (loading local json translation files)

My project is HTML only. I am not going to use node or react version.
I've tried default example that works fine
<div id="output" />
<script src="https://unpkg.com/i18next/dist/umd/i18next.min.js"></script>
<script>
i18next.init({
lng: 'en',
debug: true,
resources: {
en: {
translation: {
"key": "Hello World"
}
},
de: {
translation: {
"key": "hello welt"
}
}
}
}, function(err, t) {
// init set content
updateContent();
});
function updateContent() {
document.getElementById('output').innerHTML = i18next.t('key');
}
function changeLng(lng) {
i18next.changeLanguage(lng);
}
i18next.on('languageChanged', () => {
updateContent();
});
</script>
but I can't figure out how to load local json files instead of placing all translations in the js. Do I have to install an additional plugin for loading json translation files?
and is this the correct way of targeting every string in HTML?
function updateContent() {
document.getElementById("homeTitle").innerHTML = i18next.t("home.title");
document.getElementById("homeSubtitle").innerHTML = i18next.t("home.subtitle");
}
is there a way to add an attribute to HTML string like
<h1 data-i18n="home.title"></h1>
to get the translation?

You could load them with fetch, running a bunch of promises.
I wrote a sandbox code example for you in vanilla JS.
PS: Don't know why, but when you open code sandbox the code isn't executed well, you have to refresh the local preview to get it working (or you could try to open the preview from here), but I tested it via Live Server in my dev environment and it's working fine.

Django HTML & CSS render to pdf

I'm trying to convert HTML & CSS into a pdf page using Django-weasyprint but I'm kind of stuck with their tutorial because I want the PDF to render the current page when the user clicks on the download button and the pdf downloads automatically with read-only privileges. This whole process kind of feels painful to do.
Currently, weasyprint just converts a URL in Django to pdf, but I don't know how to set the button to look at the weasyprint view.
Maybe I am looking past it and over complicating it, any assistance would be appreciated.
Weasyprints example code:
from django.conf import settings
from django.views.generic import DetailView
from django_weasyprint import WeasyTemplateResponseMixin
from django_weasyprint.views import CONTENT_TYPE_PNG
class MyModelView(DetailView):
# vanilla Django DetailView
model = MyModel
template_name = 'mymodel.html'
class MyModelPrintView(WeasyTemplateResponseMixin, MyModelView):
# output of MyModelView rendered as PDF with hardcoded CSS
pdf_stylesheets = [
settings.STATIC_ROOT + 'css/app.css',
]
# show pdf in-line (default: True, show download dialog)
pdf_attachment = False
# suggested filename (is required for attachment!)
pdf_filename = 'foo.pdf'
class MyModelImageView(WeasyTemplateResponseMixin, MyModelView):
# generate a PNG image instead
content_type = CONTENT_TYPE_PNG
# dynamically generate filename
def get_pdf_filename(self):
return 'bar-{at}.pdf'.format(
at=timezone.now().strftime('%Y%m%d-%H%M'),
)
I made a virtual env on my pc and it's setup exactly like the example. Currently using Boostrap 4.
*Edit if there is a better way of doing it, you are more than welcome to share it :)
Also I want to target just the body tags so that it converts only that section to pdf and not the ENTIRE page.
The solution I used before this is: https://codepen.io/AshikNesin/pen/KzgeYX but this doesn't work very well.
*EDIT 2.0
I've moved on to js and I'm stuck with this script where it doesn't want to create the pdf form on click function also is there a way to set the js function to ONLY download the selected Id in the div and not on certain scale? (afraid that it's going to use the resolution instead of the actual content that needs to be rendered)
https://jsfiddle.net/u4ko9pzs/18/
Any suggestions would be greatly appreciated.

I was tried django-wkhtmltopdf and weasyprint. For shure weasyprint allow more in subject of css but still it isn't one to one to browser version. I wasn't happy with results.
It is ok for tables, and all word/excel like data. But in my case i have to made px to px 'certificate' like pdf with svg shaped background Then some lack of features starts to be not convenient problem.
So if you need use the same css with minimal modification to get effect like in browswer then puppeter solving all compabitlity problems. But this force to use Node to run puppeteer. (in my case i already use it to compile assets)
Cli for puppetere:
npm i- puppeteer-pdf
then install wrapper
pip install django-puppeteer-pdf
add node puppeteer cli start command in settings:
PUPPETEER_PDF_CMD = 'npx puppeteer-pdf'
and create view
from puppeteer_pdf import render_pdf_from_template
from django.http import HttpResponse,
import os
# Rendering code
context = {
'data': 'test data'
}
output_temp_file = os.path.join(settings.BASE_DIR, 'static', 'temp.pdf')
pdf = render_pdf_from_template(
input_template='path to template in templates dir'
header_template='',
footer_template='',
context=context,
cmd_options={
'format': 'A4',
'scale': '1',
'marginTop': '0',
'marginLeft': '0',
'marginRight': '0',
'marginBottom': '0',
'printBackground': True,
'preferCSSPageSize': True,
'output': output_temp_file,
'pageRanges': 1
}
)
#you can remove temp file now or collecte them and run some crone task.(performance)
if os.path.exists(output_temp_file):
os.remove(output_temp_file)
else:
# raise error or something
filename = f'filename={'your donwload file name'}.pdf'
response = HttpResponse(pdf, content_type='application/pdf;')
response['Content-Disposition'] = filename
To keep original color you have to add
html{
-webkit-print-color-adjust: exact;
}
controlling page size and margin when you choice 'preferCSSPageSize'.
#page {
size: A4;
margin: 0 0 0 0;
}

Use whkhtmltopdf it's very easy to use in Django. It's provide pure html generated PDF conversion
pip install django-wkhtmltopdf
https://django-wkhtmltopdf.readthedocs.io/en/latest/

FusionCharts 3.2.1 - FusionCharts._fallbackJSChartWhenNoFlash() not working

I'm using FusionCharts 3.2.1 and I want to render charts in javascript when the flash player is not installed of disabled in browser. I'm calling the method FusionCharts._fallbackJSChartWhenNoFlash() but nothing happen.
function updateChart(chartDataJSON) {
FusionCharts._fallbackJSChartWhenNoFlash();
var currentSwfName = 'MSCombi2D.swf';
if (chartDataJSON.swfName) {
currentSwfName = chartDataJSON.swfName;
}
if (prevSwfName != currentSwfName) {
prevSwfName = currentSwfName;
var contextPath = document.getElementById('contextPath').value;
var swfUrl = contextPath + '/charts/' + currentSwfName;
if (FusionCharts('residenceChart')) {
FusionCharts('residenceChart').dispose();
}
new FusionCharts({
id: 'residenceChart',
swfUrl:swfUrl,
renderAt:'consumptionChartDiv',
dataFormat:'json',
dataSource: chartDataJSON,
registerWithJS: 1,
width: 730,
height: 300,
debugMode: 0
}).render();
} else {
FusionCharts('residenceChart').setJSONData(chartDataJSON);
}
}

Is it mandatory that you stick to FusionCharts 3.2.1? If you upgrade to the latest version (which is free if you are already a customer), this issue will be solved.
Since FusionCharts 3.2.2, the component automatically renders JavaScript charts when Flash Player is not available and you would not need to explicitly call FusionCharts._fallbackJSChartWhenNoFlash(); In fact, this method is removed from the latest API.
However, if you still wish to stick to v3.2.1, I would recommend you first look into the following:
Ensure that you have all the accompanying JavaScript file that was supplied with the FusionCharts package and kept beside the `FusionCharts.js`` file.
Since, the JavaScript charts require additional JS files, they are loaded dynamically when needed. However, it might havae failed for your case; try manually adding the JavaScript files to the page head post inclusion of FusionCharts.js
If you have any JavaScript error on your browsers debug/js console, look for hints from the error message. The FusionCharts documentation and the product forum may help you figure out the cause of the error message.
Just as a precaution, ensure that the swfName passed via JSON is in proper case. FusionCharts 3.2.1 JavaScript charts had a swfUrl case-sensitivity issue.

It seems that the parameters for the FusionCharts Constructor are not in the proper order.
From the FusionCharts Documentation:
var myChart = new FusionCharts("FusionCharts/Column3D.swf", "myChartId", "400", "300", "chartContainer", {dataFormat : "json", dataSource : chartDataJSON});
The above code should work for you.