How to display check mark character in jQuery datatables PDF export - javascript

I have the following table which uses the datatables plugin for pagination, sorting and exporting.
Everything works great except the check mark in my html is not exported with the pdf, yet it is with excel. I want to get this working because I am going to remove the checkbox element in favour of clicking the table cell and toggling whether the check mark is present. I really want to avoid using 'Y'/'N' as indicators in any part of the table/exports.
Has anyone come across this issue before or can offer any light, my instinct tells me it's something to do with the character encoding in PDF export library, but I don't want to go just go in and start editing library files because this issue (may)will be repeated if I ever need to upgrade the lib. In addition, I'm not totally sure what to look for.
HTML
Excel
PDF


While writing a PDF, use unicode string for check mark exactly as below:
&#10003 followed by ;
like
<table border="2"><tr><td><Check mark: </td><td>✓</td></tr></table>


PROBLEM:
jQuery's Datatables uses pdfmake library for its eporting in PDF.
pdfmake uses only one font 'Roboto' as it's text font and as it so happens its char-set doesn't support the '✓' symbol.
You can have a look at all the characters 'Roboto' , pdfmake and subsequently Datatables supports here: https://www.fontspace.com/font-charmap/21071
This information was found at: https://github.com/bpampuch/pdfmake/issues/1478
SOLUTION:
You can change the font that Datatables uses when exporting to pdf using pdfmake to something that support the character symbol '✓'
create a new vfs_fonts.js file containing your font files
Create the examples/fonts subdirectory in your pdfMake code directory, if it doesn’t already exist.
Copy your fonts (and other files you wish to embed) into the examples/fonts subdirectory.
Run npm install (from the pdfMake directory) to ensure all prerequisites modules are installed.
Run gulp buildFonts to create a new build/vfs_fonts.js (you can update gulpfile.js to change the base directory path or to add an alternative config for the buildFonts task).
Include your new build/vfs_fonts.js file in your code (in the same way you include pdfmake.js or pdfmake.min.js).
The above buildFonts action embeds all files from examples/fonts (into a local key/value variable pdfMake.vfs) - not only fonts. Which means you could put images in there, run gulp buildFonts, and reference them by filename in your doc-definition object.
include this newly created font file in your document
<script type="text/javascript" src="./pdfmake-0.1.37/vfs_fonts.js"></script>
add your fonts to pdfmake
pdfMake.fonts = {
Arial: {
normal: 'arial.ttf',
bold: 'arialbd.ttf',
italics: 'ariali.ttf',
bolditalics: 'arialbi.ttf'
}
};
Add your font to the Datatable
buttons = [
{
customize: function (doc) {
doc.defaultStyle =
{
font: 'Arial'
}
}
}
]
Some helpful links:
DataTables & PDFmake - question on how to set a new font to the datatable
https://datatables.net/forums/discussion/51827/how-i-change-font-family-in-pdf-export - datatable community question on how to change the font family.

Related

setup.py: Depend on CSS and JS packages

I have a Python project which displays some information in the browser and uses bootstrap and D3 to do so. Right now, I'm simply including bootstrap.min.css and d3.v5.min.js in the source code repository, add them to the package_data in setup.py, and update them as new versions are released. This is rather ugly of course.
I'd like to specify bootstrap and D3 as a dependency in setup.py; any hint on how this could be possible?

after vscode format code the program doesn't work [duplicate]

I've the following snippet in my index.js
class App extends Component {
render() {
return ( <div style = { styles.app } >
Welcome to React!
</div>
)
}
}
The code works, but every time I save (ctrl+s) visual studio format the jsx like that:
class App extends Component {
render() {
return ( < div style = { styles.app } >
Welcome to React!
<
/div>
)
}
}
How can I solve this? thanks

In the end what did the trick was changing the file format from JavaScript to JavaScript React on the bottom toolbar.
I'm publishing it here for future reference since I didn't find any documentation on this topic.
In addition to the above. If you click 'Configure File Association for .js' you can set all .js files to Javascript React

change vscode preferences settings > user settings below:
"files.associations": {
"*.js":"javascriptreact"
}

You can prevent VSC from incorrectly formatting your JSX by adding an association in your settings.json
Code > Preferences > Settings
In the settings window search for associations, click edit in settings.json and then add:
"files.associations": {
"*.js": "javascriptreact"
}

Alternatively, saving the file with a .jsx extension resolves this in vscode.
I had the same challenge and I am hoping to discover a better way of handling this issue in vscode.
I noticed your suggested work-around has to be done each time you open the react file with an extension of .js

Open the Visual Studio Code Settings. Refer the image below to see how to navigate to the settings.
Once the settings tab is open. If you want to make the settings changes for all the projects then select the User sub tab, if only for current project then select the Workspace sub tab.
type "file associations" in the search text box and press Enter.
Click on add item.
set Item : *.js
set Value : javascriptreact
Above changes will start associating all *js files in the project as javascript React files.
Next open any .js file in your project and right click and select Format Document. If you have multiple formatters then associate your favorite formatter. I have used Prettier to handle my formatting.

Install Prettier (if not installed by default) and try to add this to your user or workplace settings:
"prettier.jsxBracketSameLine": true
Do not put linebreak between return and the returned JSX expression.
Trigger autoformat (Alt+Shift+F) and check if works.

I struggled with this but finally found a solution. This is my settings.json
{
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
"workbench.startupEditor": "welcomePage",
"window.zoomLevel": 1,
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"vue-html": "html"
},
"editor.formatOnSave": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"editor.wordWrap": "on",
"editor.tabSize": 2,
"editor.minimap.enabled": false,
"workbench.iconTheme": "vscode-icons",
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"beautify.ignore": [
"**/*.js",
"**/*.jsx"
],
"prettier.jsxSingleQuote": true,
"prettier.singleQuote": true
}
I added
"beautify.ignore": ["**/*.js","**/*.jsx"]

Make sure you dont have multiple javascript formatters enabled in your current workspace. (You have to disable the rest of them for your current workspace).
react-beautify mostly does the magic but fails if you have some other JS formatter/beautifier already installed.
In my case, I had react-beautify and JS-CSS-HTML Formatter extension installed. I had to disable the JS-CSS-HTML Formatter for my current workspace.

Here is what worked for me-
I clicked on the Language mode (Javascript React) at the bottom of the screen
Then chose the Configure React Javascript Language based setting option
Then changed the javascript react default formatter to prettier as shown in the pic.
That pretty much did it for me after I saved the React file.

I just added all the combinations mentioned above.
added this
"files.associations": {
"*.js": "javascriptreact"
}
added this also
"beautify.ignore": ["**/*.js","**/*.jsx"]
Deleted additional js formatting
installed prettier
turn ON prettier and formatting

You can install an extension like react-beautify that helps you format your jsx code.
It is found here
This extension wraps prettydiff/esformatter to format your javascript, JSX, typescript, TSX file.

I had to disable the JS-CSS-HTML Formatter extension in VSC. only solution to this problem

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
include :
JavaScript
TypeScript
Flow
JSX
JSON
CSS
SCSS
Less
HTML
Vue
Angular
GraphQL
Markdown
YAML
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

I had similar problem, then I found out it was caused by 'beautify' extension. After I uninstalled the extension, everything is working fine.

After reading many great suggestions and workarounds, I discovered that I could simply place my mouse arrow down over the bright blue horizontal bar at the bottom of VSCode editor window - right click - which opens a popup list window - and deselected = "Editor Indentation".

You can double click JavaScript in the Status Bar at the bottom of VSCode, and then change the format from JavaScript to React (Choose React in the Select language mode to associate with '.jsx')

add this in your .js code,
/* prettier-ignore */

Could I use an old Javascript file with a new CSS file in Materialize?

This is my short problem, in my page I have an old version of Materialize, and I have seen in the last version of it that they have added the class "xl" to define grid's sizes.
If I upgrade all files, my page will break, because for example, in my JS file I open the modals with the function "leanModal()" and in the new version they use "modal()" and if I upgrade it, is a lot of time!!.
My questions is the next:
If I only need the class "xl" can I upgrade only the CSS File? If I would make it, would have a problem in the future with the JS File?
My version of Materialize: v0.97.7 (2014-2015)
The actual version of Materialize: v0.98.1 (2017-Now)

I'm not all that familiar with Materialize but I believe it has components that are implemented with a mix of CSS, HTML and JS. If you are using any of these components then yes, there's a possibility that other things might break. Typically these components will be expecting a certain HTML structure and CSS classes to be available/used. If the name of something has changed in one area of the framework then it's reasonable that something else could have changed elsewhere. You'd have to verify that yourself.

Yes, You will have problems because the JavaScript calls specific classes in the CSS for that version.

Ace Editor HTML Live Syntax checking

I'm using Ace Editor, and I'm trying to figure out how to get it to live syntax check the HTML markup in the editor.
If I set it to javascript using:
editor.getSession().setMode("ace/mode/javascript");
The live syntax checking (all the little Xs and Is on the left side) works completely fine.
However, If I change it back to HTML using
editor.getSession().setMode("ace/mode/html");
I only get the default editor with code completion for HTML, but no live syntax check.
I know this can be done because on HTML version of the Kitchen Sink (http://ace.c9.io/build/kitchen-sink.html), it shows the code syntax checking if I don't use proper markup.
How do I do this?

Update to latest version and make sure worker-html.js file is present.

There is a specific file "worker-(languageName)" in the folder provided by the Ace Library. You just have to add that file in the folder where you have the "ace.js" file stored for your project. The Live Syntax Checking will start working in your project.

How to show Occurences for Javascript in Aptana?

I am trying to show occurences when browsing .js files in Eclipse (just simple occurences like it does for C).
For example, if I highlight myVar, then Eclipse should show boxes in a ruler where other occurences of myVar occur in the file.
I've gone into Preferences->General->Editors->Text Editors->Annotations multiple times, de/selected and applied changes to Javascript Occurences, Occurences(com.aptana.ide.annotation.occurences), Occurences(org.eclipse.jdt.ui.occurences) all to no avail(C occurences continue working perfectly on .c files).
I've opened .js files in default Javascript editor and in Aptanas .js editor with no results.
Even really dumb show of occurences which would show any selected text(var, null, etc.) would be great.
Additional information on workspace: Eclipse 3.5(didn't work on 3.4 either), Ubuntu 9.04, CDT, Aptana, Subversive, and some other plugins. .js files are from a large non-web project.

To circumvent your problem, you could use the JSEclipse plug-in (http://www.interaktonline.com/Products/Eclipse/JSEclipse/Installation-Update/). It supports occurrence markers, code completion, etc.

Categories

Resources