I am using the built in functionality of KendoUi Grid to export the grid data in pdf http://demos.telerik.com/kendo-ui/grid/pdf-export. It is working properly when data language is English. But when data language is right to left such as persian or arabic, in pdf export show letters separately and contrariwise.
for example show "مان" instead of "نام".
How can Solve it.
My Code:
#(Html.Kendo().Grid<MyModel>()
.Name("GridName")
.ToolBar(toolbar =>
{
toolbar.Pdf().Text(" ").HtmlAttributes(new { #class = "excel-pdf-btn fa fa-file-pdf" });
})
.Pdf(pdf => pdf.AllPages().FileName("MyFileName.pdf").PaperSize("A4").ProxyURL(Url.Action("Pdf_Export_Save", "Grid")))
.Columns(columns =>
{
columns.Bound(t=> t.Id).Visible(false);
columns.Bound(t => t.Name).Title("نام");
.DataSource(t => t
.Ajax()
.Model(m => m.Id(i => i.Id))
.PageSize(15)
.Read(r => r.Action("FillGrid", "MyController"))
)
)
Update:
I embed ttf font. but problem not solved.
<script>
kendo.pdf.defineFont({
'serif': 'MyFont',
'serif|bold': 'MyFont',
'serif|italic': 'MyFont',
'serif|bold|italic': 'MyFont',
'sans-serif': 'MyFont',
'sans-serif|bold': 'MyFont',
'sans-serif|italic': 'MyFont',
'sans-serif|bold|italic': 'MyFont',
'monospace': 'MyFont',
'monospace|bold': 'MyFont',
'monospace|italic': 'MyFont',
'monospace|bold|italic': 'MyFont',
"MyFont" : "#Url.Content("~/Content/fonts/MyFont.ttf")"
});
</script>
Unfortunately - according to this: https://feedback.telerik.com/kendo-jquery-ui/1359291-add-right-to-left-pdf-support it doesn't look like it is supported in the PDF export as of yet.
There are some possible options listed here - no idea if they work though. Export to PDF using Kendo UI (issue with RTL languages)
Related
I have a Vue 3.2 Custom Elements project, perfectly running via -ce extension and webpack config
`chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.tap(options => ({
...options,
compilerOptions: {
// treat any tag that starts with ion- as custom elements
isCustomElement: tag => tag.startsWith('ce-')
}
}))
}`
But, once a component is added to Storybook, the style part on my Single File Components does not get injected in Shadow DOM. No style at all (unless javascript imported from separate .css file).
Thanks for your help.
so I am building a vueJs app using vuetify and vue-i18n for internationalization so i have this font-family that I want just to be applied on the Arabic language, so I will be switching styles when changing the language.
For now that's my function :
changeLanguage: function (lang) {
this.$i18n.locale = lang
localStorage.setItem('lang',lang);
},
knowing that I can apply the rtl functionality that comes with vuetify but does it give me options to change the font-family (load a different style) ?
if not is there any solution for this problem ?
thanks
I found a solution, which is very simple:
I created two files :
// ArabicFont.css
*{
font-family: "my font for arabic lang" !important;
}
and
// MainFont.css
*{
font-family: "my font for other cases" !important;
}
and when changing the language a page refresh should be applied to load the proper css file by adding this code to the main app component :
<template>
<router-view />
</template>
<script>
export default {
mounted: function(){
let lang = localStorage.getItem('lang')
if(!lang) localStorage.setItem('lang',this.$i18n.locale)
//section added :
if(lang){
if(lang === 'ar'){
import ("./assets/css/ArabicFont.css");
}else{
import("./assets/css/MainFont.css")
}
this.$i18n.locale = lang;
}
}
}
</script>
and the function changeLanguage will become like this :
changeLanguage: function (lang) {
this.$i18n.locale = lang
localStorage.setItem('lang',lang);
//added this line to refresh the page:
this.$router.go()
},
and that's it, it worked very well for me !
I want to add some local images(emojis) to pell rich editor component. I don't want to use Rich Toolbar, and have some custom emoji picker to select the emoji.
When user selects an emoji, I want to show an image for that emoji in the rich editor. These images are located locally in the project, so I tried insertImage method but cannot use it properly.
I have used insertImage this way:
editorRef.current?.insertImage(
'./1f602.png',
'width: 64px; height: 64px',
)
But it doesn't work.
How can I add a local image to pell rich editor?
I solved it like...
import ImgToBase64 from 'react-native-image-base64';
import ImagePicker from "react-native-image-crop-picker";
openGalleryClickProfile() {
ImagePicker.openPicker({
width: 300,
height: 400,
cropping: true,
}).then((image) => {
console.log("Imagemime", image);
this.onPressAddImage(image)
});
}
onPressAddImage(image){
ImgToBase64.getBase64String(image.path)
.then((base64String) => {
const str = `data:${image.mime};base64,${base64String}`
this.richText.current?.insertImage(
str
);
})
.catch((err) => {
console.log("base64:Image:", err)
})};
I have a svg file that I am loading to my Component. Each path has an ID associated with a particular path. However, when I render my svg the IDs are not displayed. I attached some pictures to show first one is the svg code and the second one is the dom loaded in browser
Svg file
I've encountered the exactly the same problem. Assuming you're using vue-svg-loader to import the svg files, the issue is that the loader drops some attributes, including the IDs.
My solution was not to import the svg files, but rather paste the content directly into a vue component.
// myIcon.vue
<template>
<svg version="1.1"...>
<path id="81A" .../>
</svg>
</template>
Now if you import myIcon.vue, all the attributes will be preserved.
Ok. So the problem was coming from vue-svg-loader and I was able to find a quick fix by adding the following to the vue.config. If anyone encounters the same issue. Basically add {cleanupIDs: false}, to the svgRule. Seems like by default vue-svg-loader removes the id's no idea why.
module.exports = {
chainWebpack: (config) => {
const svgRule = config.module.rule('svg');
svgRule.uses.clear();
svgRule
.use('vue-svg-loader')
.loader('vue-svg-loader')
.options({
svgo: {
plugins: [
{removeDoctype: true},
{removeComments: true},
{cleanupIDs: false},
{collapseGroups: false},
{removeEmptyContainers: false}
],
},
});
},
};
<template>
<div>
<text class="fontawesome"></text>
<text class="fontawesome">{{testfontawesome}}</text>
</div>
</template>
<style scoped>
.fontawesome {
font-family:FontAwesome;
}
</style>
<script>
export default {
data: () => ({
testfontawesome: ""
}),
}
</script>
How can I display fontawesome icon in dynamic value?
In the code sample above, only the first line shows the icon correctly, secondly shows the raw value instead of the icon.
Why?
You need to bind the value as raw html.
https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML
<text class="fontawesome" v-html="testfontawesome"></text>
Vue is protecting you from cross-site scripting (XSS) attacks by automatically html encoding values.
As the warnings in the docs point out, avoid using v-html to display user-generated text, as it could be malicious.