I've got little problem with wicked_pdf footer render.
Here is my render method:
def invoice
render pdf: "#{#order.number}.pdf",
footer: { html: { template: "admin/orders/invoice_footer.html" } },
margin: { bottom: 25 }
end
PDF render works OK, but there is no footer template. I tried different margins in wicked settings, but with no success.
Just had this same issue, the problem seemed to be that my wkhtmltopdf install did not generate the footers as requested.
The version I had was installed via the Ubuntu repository, I un-installed this and downloaded a pre-built version as described here and now it works fine:
https://github.com/mileszs/wicked_pdf/wiki/Getting-Started-Installing-wkhtmltopdf
I did run into the same problem and it was a problem with the partial not being rendered.
So this answer https://stackoverflow.com/a/19323701/784318 did work for me:
So I changed my code from this:
options = {
header: {html: {template: 'shared/_header', layout: nil}},
}
To this:
options = {
header: {content: render_to_string('shared/_header', layout: nil)},
}
Related
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 a particular issue and I'm hoping someone can point out what I'm not doing correctly. My original code is posted here: Solved:Vue.js Konva library to display a simple image, what am I missing?
.
What's happening is I'm displaying a single image with Konva successfully (see code), however when I try to view the same page using mobile IOS Chrome or Safari, nothing displays. It works fine in desktop OSX Chrome and Safari, but not on the mobile versions. I just get a blank area where normally I would see the image on my OSX browsers. I'm sure there may be a step I am missing. Furthermore another interesting issue on the OSX browsers is that when I bring up the page to display the image initially it is blank until I do a page refresh, then it displays. Now maybe this is Vue.js and not Konva. However I thought I would point that out if anyone has further insights. Any suggestions would be greatly appreciated.
[Updated: Got it working] - Ok, I've done some testing and this is what I found out that seemed to solve the issue. After research, the biggest issue related to this is somewhere during the lifecycle the image is not attached to the dom before it is rendered. Even though I am doing image.src during the mounted stage which is the same as ".ready()" from what I understand. I even tried loading the image using the updated stage in Vue. Same issue. What worked was I used v-if to hide the Konva stage, then attached the source during mounted then ran v-if=true post image attachment to display the Konva stage and Bingo! everything works. It even works on the IOS browsers.
<template>
<div id="app">
<h1>Display Image via Konva</h1>
<div v-if=ShowStage>
<v-stage ref="stage" :config="configKonva">
<v-layer ref="layer">
<v-image :config="configImg"></v-image>
</v-layer>
</v-stage>
</div>
</div>
<script>
import Vue from 'vue';
import VueKonva from 'vue-konva'
Vue.use(VueKonva)
export default {
data() {
return {
ShowStage: false,
testImg: new Image(),
configKonva: {
width: 500,
height: 500
}
},
computed: {
configImg: function() {
return {
x: 20,
y: 20,
image: this.testImg,
width: 200,
height: 200,
}
}
},
mounted() {
this.testImg.src = "https://konvajs.github.io/assets/lion.png"
this.ShowStage = true
}
}
</script>
I am experiencing the same issue right now.
Locally it seems to work on IPhone with Safari but deployed to the Server it is not working anymore.
However did you try something like this?
const image = new Image()
image.src = url
image.crossOrigin = 'anonymous'
image.onload = () => {
new Konva.Image({image: image})
// Further code ...
}
The crossOrigin set to anonymous helped me at least partly.
Hi I am new to sencha touch2, am facing problem while setting background image. I could not see full image on Tablet, the bottom part has been cutoff.
here is my view:
Ext.define('Test.view.LoginPage', {
extend: 'Ext.form.FormPanel',
xtype: 'loginPage',
config:{
styleHtmlContent:'true',
scrollable:'false',
styleHtmlCls:'login-Cls',
html: '<img class="logo" src="resources/images/login_Landscape_BG.png"/>'
}
});
and do i need to add tablet in profiles folder as my app targets only for Tablet.
Can you please help me. Thanks
FWIW, I had to follow this suggestion:
http://www.sencha.com/forum/showthread.php?189231-Background-Image-in-form-Panel
and use this for my CSS (added the TxPanel cls to the form panel first):
.TxPanel .x-scroll-container {
background: url('img/txbackground.png') repeat center;
}
But blechhh. This is a pretty ugly hack :-P
Try this (use Style config insteat of html config):
Ext.define('Test.view.LoginPage', {
extend: 'Ext.form.FormPanel',
xtype: 'loginPage',
config:{
styleHtmlContent:'true',
scrollable:'false',
styleHtmlCls:'login-Cls',
style: 'background-image:url(resources/images/login_Landscape_BG.png);background-repeat:no-repeat;background-size:100% 100%;'
}
});
Instead of using html, you can try using style to set full background image:
style: 'background-image: url("resources/images/sesto-exterior.jpg"); background-size: 100% 100%;'
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.
So working though the mostly absent docs on templates - unable to get it to work.
Ext.define('MyAPp.view.Login', {
extend: 'Ext.Component',
xtype: 'welcomeLogin',
config: {
html: 'This shows',
tpl: Ext.create ('Ext.XTemplate', '<div>Please show something</div>', {
compiled: true
})
}
});
Why does the template content now show? I have tried adding apply(), applyTemplate() on and on and on... Please help!!!
#ilija139 is right.
you need to define the data property, even if it's empty.
data: {}
Edit:
Also, the compile attribute isn't needed. It only applies to Ext.Templates not XTemplates (according to the docs). Works the same for me without compile