I'm trying to generate a PDF with Bootstrap-table, for this the documentation said to use tableExport.js which in turn uses jsPDF to generate the pdfs. The actual problem is that the data is in spanish containing chars such as á,é,í,ó,ú and ñ that are not shown correctly in the pdf. Reading jsPDF's documentation it mentions that the 14 standard fonts in PDF are limited to the ASCII-codepage.
Looking further into it jsPDF's documentation says it can be done. If you want to use UTF-8 you have to integrate a custom font, which provides the needed glyphs. jsPDF supports .ttf-files. So if you want to have for example Chinese text in your pdf, your font has to have the necessary Chinese glyphs. So, check if your font supports the wanted glyphs or else it will show garbled characters instead of the right text.
To add the font to jsPDF use our fontconverter in /fontconverter/fontconverter.html. The fontconverter will create a js-file with the content of the provided ttf-file as base64 encoded string and additional code for jsPDF. You just have to add this generated js-File to your project. You are then ready to go to use setFont-method in your code and write your UTF-8 encoded text.
Alternatively you can just load the content of the *.ttf file as a binary string using fetch or XMLHttpRequest and add the font to the PDF file:
But I have no idea how to integrate both codes. The PDF generates perfectly with my code exept for the fact that some chars dont look correct. As you can see in the section of my code I never instanciate jsPDF, I use Bootstrap-table options
Im Working on a .net project on Visual Studio
------------This is my code----------------------------------------------
$(function () {
function DoCellData(cell, row, col, data) { }
function DoBeforeAutotable(table, headers, rows, AutotableSettings) { }
$("#frm-Search").on("submit", function (event) {
event.preventDefault();
var $frm = $(this);
var formData = $frm.serializeObject();
if ($frm.valid()) {
/*loading(true);*/
GetSpanishData(formData).then(function (result) {
$("#tbReport").bootstrapTable({
search: true,
pagination: true,
export: true,
exportOptions: {
fileName: 'TheSpanishReport',
jspdf: {
format: 'bestfit',
margins: { left: 20, right: 20, top: 20, bottom: 20 },
autotable: {
styles: { overflow: 'linebreak' },
tableWidth: 'wrap',
tableExport: {
onBeforeAutotable: DoBeforeAutotable,
onCellData: DoCellData
}
}
},
},
exportTypes: ['csv', 'excel', 'pdf'],
data: result
});
$("#tbReport").bootstrapTable('refreshOptions', {
data: result
});
$("#tableReport").attr("hidden", false);
});
}
return false;
}).validate();
});
function GetSpanishData(data) {
return $.ajax({
url: ServerAdress/GetSpanishData',
type: 'POST',
dataType: 'json',
data: AntiForgeryToken(data)
});
}`
---------Code to integare font into PDF as described on jsPDF's Documentation----------
`const doc = new jsPDF();
const myFont = ... // load the *.ttf font file as binary string`
// add the font to jsPDF
doc.addFileToVFS("MyFont.ttf", myFont);
doc.addFont("MyFont.ttf", "MyFont", "normal");
doc.setFont("MyFont");
-----------------I've tryed converting a font to base64 as asked in the documentation and loading the js to the project then adding to the jsPDF section of the Bootstrap-Table parametes the option setFont, but it does not work---------------------------------------
jspdf: {
setFont:'MyFontName',
format: 'bestfit',
margins: { left: 20, right: 20, top: 20, bottom: 20 },
autotable: {
styles: { overflow: 'linebreak' },
tableWidth: 'wrap',
tableExport: {
onBeforeAutotable: DoBeforeAutotable,
onCellData: DoCellData
}
}
},
I had a similar problem today (exporting pdfs but with german umlaute ä ö ü from bootstrap-table), this worked for me:
you can use pdfmake instead of jspdf with tableExport.
include pdfmake instead of jspdf:
Many HTML stylings can be converted to PDF with jsPDF, but support for
non-western character sets is almost non-existent. Especially if you
want to export Arabic or Chinese characters to your PDF file, you can
use pdfmake as an alternative PDF producer. The disadvantage compared
to jspdf is that using pdfmake has a reduced styling capability. To
use pdfmake enable the pdfmake option and instead of the jsPDF files
include
<script type="text/javascript" src="libs/pdfmake/pdfmake.min.js"></script>
<script type="text/javascript" src="libs/pdfmake/vfs_fonts.js"></script>
<!-- To export arabic characters include mirza_fonts.js _instead_ of vfs_fonts.js
<script type="text/javascript" src="libs/pdfmake/mirza_fonts.js"></script>
-->
<!-- For a chinese font include either gbsn00lp_fonts.js or ZCOOLXiaoWei_fonts.js _instead_ of vfs_fonts.js
<script type="text/javascript" src="libs/pdfmake/gbsn00lp_fonts.js"></script>
-->
(from https://github.com/hhurz/tableExport.jquery.plugin#installation)
npm pdfmake
adapt your bootstrapTable exportOptions:
exportOptions: {
fileName: 'TheGermanReport',
pdfmake: {
enabled: true,
docDefinition: {
pageMargins: [ 20, 20, 20, 20 ]
}
}
},
pdfmake documentation
I have laravel-vueJS application. I installed vue-meta plugin and declared metaInfo object in vue component as below,
metaInfo: {
title: 'Default Title',
description: 'Default description'
},
These meta info is getting shown in front side but when I view the source code in browser it doesn't shows meta title and meta description.
The link to plugin: https://vue-meta.nuxtjs.org/
The section I want to accomplish: https://vue-meta.nuxtjs.org/guide/ssr.html#inject-metadata-into-page-string
How to render meta info in server side
What is the server-entry.js file mentioned in document.
I made a template with an editable image ("Editable Content Area"), like so:
<img src="http://somewhere.com/foo.jpg" mc:edit="header_image">
When making a new campaign I can replace the image while using the MailChimp editor. But I don't seem to be able to replace the image using the API.
If I include the URL to the image as the section content, it seems to be ignored and the campaign is created without the new image url being set.
content: {
sections: {
header_image: "http://somewhere/else/bar.jpg",
header: "Our latest newsletter",
body: "<p>My fabulous content</p>",
... other named mc:edit section content ...
}
}
All other editable sections (text) are being properly replaced.
Question: How can I set the url of an mc:edit tagged image via the campaigns/create API?
Unfortunately editable content areas are not supported in the MailChimp API. The editable area was made for use within their own editors.
A workaround is to just have an editable content area and to put a full image tag into it via the API.
For example;
content: {
sections: {
header_image: "<img src='http://somewhere.com/foo.jpg'>",
header: "Our latest newsletter",
body: "<p>My fabulous content</p>",
... other named mc:edit section content ...
}
}
am using kendo data vizualization api to render dashboard page with charts
user does some selection on page which triggers ajax call and draws the charts on this dashboard page.
i need to add the feature to export the dashboard page with multiple charts to pdf
i tried phantom js but am not clear how to make it work in this context where current user is already logged in and on dashbaord page and clicks on export to pdf button.
my web layer is using asp.net 3.5 and i dont want to mix the mvc.dll solution as posted on kendo site in my project.
has any one tried this before ? please hlp.
thanks.
This JS code exports all rendered to container element with ID 'your_container_with_charts_inside' charts to PDF:
$( document ).ready(function() {
var $element = $('#your_container_with_charts_inside');
kendo.drawing.drawDOM($element)
.then(function (group) {
return kendo.drawing.exportPDF(group, {
paperSize: "auto",
margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
});
})
.done(function (data) {
kendo.saveAs({
dataURI: data,
fileName: "export.pdf",
});
});
});
Also you might want to check Chart API / PDF Export demo
i am trying use the Grails wkhtmltopdf plugin (https://github.com/quorak/grails-wkhtmltopdf), but i can't get a rendered pdf file. Only the gsp template is shown instead.
What I have done so far:
This is the link, which calls the action in the Controller:
<g:link action="downloadQuestionnaire" id="${questionnaireInstance?.id}">Download questionnaire</g:link>
This is the action in the Controller:
def downloadQuestionnaire = {
def questionnaire = Questionnaire.get(params.id)
render( filename:"File ${questionnaire.id}.pdf",
view:'/templates/pdf/_questionnaire.gsp',
model:[questionnaireInstance: questionnaire],
marginLeft:20,
marginTop:35,
marginBottom:20,
marginRight:20,
headerSpacing:10,
)
}
_questionnaire.gsp is the template, which should be rendered as pdf.
In config.groovy
grails.plugin.wkhtmltox.binary = "/usr/local/bin/wkhtmltopdf"
and i checked, that wkhtmltopdf ist working correctly.
To my understanding of the wkhtmltopdf plugin, the template _questionnaire.gsp should be rendered as pdf available to download.
But in my case, the gsp-template is shown with the data of the questionnaireInstance.
There are no error messages at all.
Any ideas, how to get the pdf output?
add pdf: 'application/x-pdf' to grails.mime.types in Config.groovy
grails.mime.types = [
all: '*/*',
....,
pdf: 'application/x-pdf'
]
and try to call controller/action.pdf or custom your g:link tag into this
<g:link action="downloadQuestionnaire" id="${questionnaireInstance?.id}.pdf">Download questionnaire</g:link>
hope it help.