I am using html2pdf library to generate PDF of my HTML. On my local machine below code is working fine but when I deployed the same on the server the PDf is generating without CSS styles. Below is my Code. Kindly help me to resolve this issue.
window.onload = function () {
document.getElementById("generatePdf").addEventListener("click", () => {
const cvitae = this.document.getElementById("configuration-area-c");
var opt = {
filename: "morsewatchment-configurator.pdf",
image: { type: "jpeg", quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: "in", format: [12, 6], orientation: "portrait" },
};
//html2pdf().from(cvitae).set(opt).save();
});
};
This is a known issue when working with html2pdf.js, you can read more here, also issue on github.
The obvious approach to fix this is to include all your needed css rules in a style tag directly in the html page.
Also you can go to this branch on Github look into the /dist/ directory and pull out whichever files your project relies on and use it.
Or if you are using npm run :
npm install eKoopmans/html2pdf.js#bugfix/clone-nodes-BUILD
Related
I am trying to export a django_plotly_dash dashboard to pdf and can't quite get it. I am stuck with the following error in console when clicking on the button to trigger the export:
ReferenceError: html2pdf is not defined
at Object.nClicksToPDF [as n_clicks]
which is telling me that html2pdf cannot be found. I have tried importing in assets folder as well as cdn directly in the app layout but nothing seems to do the trick and I am out of things to try:
here is how I import it in the app:
html.Script(src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"),
here is my callback where it is called:
app.clientside_callback(
"""
function nClicksToPDF(n_clicks){
if(n_clicks > 0){
document.querySelector('.chkremove').style.display = 'none';
const opt = {
margin: 2,
filename: 'myfile.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 1},
jsPDF: { unit: 'cm', format: 'a2', orientation: 'p' },
pagebreak: { mode: ['avoid-all'] }
};
console.log('ok')
html2pdf().from(document.getElementById("print")).set(opt).save();
setTimeout(function(){
document.querySelector('.chkremove').style.display = 'block';
}, 2000);
}
}
""",
Output('js','n_clicks'),
Input('js','n_clicks')
)
Don't know what else to do, any help would be highly welcome!
The problem comes from the html.Script component, which does not work as one might expect : in short, the <script> tag is created, but never executed.
It is part of a larger issue : Several components have limited or no functionality in current browsers :
[...] browsers don't execute <script>s inserted in the way react does it (via innerHTML). Including html.Script in the documentation only leads folks
down dead ends. Either it should use a different insertion mechanism,
or it should have a bright big warning in the docs, or it should be
removed entirely.
The alternative is to add html2pdf as an external script, ie :
scripts = [{
'src': 'https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js'
}]
app = DjangoDash(__name__, external_scripts=scripts)
I have the following nex.config.js configuration
const withImages = require("next-images");
module.exports = withImages({
fileExtensions: ["jpg", "jpeg", "png", "gif"],
assetPrefix: "https://cdn.mydomain.co.za",
webpack(config) {
return config;
},
});
I am trying to pull my images from my cdn instead of locally. The problem with this is that this plugin also tries to pull javascript and css from _next/static/chunks
and therefore my website breaks because files like this one below dont exist on my cdn
https://cdn.mydomain.co.za/_next/static/chunks/main.js?ts=1605264866650
Is there a way to specify in the config that I only want to pull images from my CDN and not all assets?
Is it possible to add a local html file in the nativescript webview ?
If yes How can I do it using javascript ?
When I add online page it works , I can add www.google.com in the webview it works .But I want to add a local page but I don't find a way to do this .
Yes, it's possible. You need to consider that all NativeScript apps are build by default with Webpack and the default webpack.config.js will take care of certain files (like the ones in a fonts folder or like all images with *.png and *..jpg extensions). The webpack build will bundle all JavaScript files and in the case of the Angular flavor will also cognitively include the Angular related HTML files. However, the default webpack.config.js won't "know" about your custom HTML file.
The solution is to let Webpack know that it should copy the specific HTML file. This should be done via the CopyWebpackPlugin section in webpack.config.js file.
Example (assuming we have a file called test.html in the app directory)
new CopyWebpackPlugin([
{ from: { glob: "test.html" } }, // HERE
{ from: { glob: "fonts/**" } },
{ from: { glob: "**/*.jpg" } },
{ from: { glob: "**/*.png" } },
], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
For real-life example see this config where this HTML file is the one we are targeting.
I'm new to Monaco and Typescript in general. I'm trying to get JQuery code completion to work on my editor. I've tried just about every example I've been able to find on how to accomplish this. I think I'm pretty close, but probably missing something fundamental.
From the DefinitelyTyped folks, I've gotten their jquery directory and included it in my web project. In the file that is creating my Monaco editor I have the following.
const path = "/jslib/monaco/types/jquery/index.d.ts";
const typings = readTextFile(path);
monaco.languages.typescript.javascriptDefaults.addExtraLib(typings, path);
readTextFile() is just a little function I'm using to get the contents of index.d.ts (which I can confirm is working). Here is the rest of my monaco setup.
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
target:
monaco.languages.typescript.ScriptTarget.ES2016,
allowNonTsExtensions: true,
module: monaco.languages.typescript.ModuleKind.System,
noEmit: true,
typeRoots: ["/jslib/monaco/types"],
noLib: true
});
window.editor = monaco.editor.create(document.getElementById('monacodiv'), {
value: $("#formula").val(),
language: 'javascript',
theme: "vs-dark",
autoIndent: true,
dragAndDrop: true,
tabCompletion: true,
fontFamily: "monospace",
scrollBeyondLastLine: false
});
If anyone could let me know what I'm doing wrong, that would be awesome!
So I just ran into this problem, after digging into the DefinitelyTyped definitions, I noticed that index.d.ts is just aggregates the content from four different files (JQueryStatic, JQuery, misc, legacy). Adding the content of all of these files by repeatedly using addExtraLib should work! Otherwise, not sure how monaco could find the contents.
I am embedding Ace locally offline and so am not using the hosted package and am subject to the same origin policy.
How do you tell ace to look in a particular folder for it's source of modes, themes and workers?
You used to be able to use:
editor.config.set("modePath", "Scripts/Ace");
editor.config.set("workerPath", "Scripts/Ace");
editor.config.set("themePath", "Scripts/Ace");
But that doesn't work in the latest version.
How can this be achieved?
Thanks in advance
I had a similar issue and you can actually let Ace know what's the base folder path this way:
ace.config.set("basePath", "/Scripts/Ace");
This work with the latest version I have, v1.1.3
The simple way to achieve the same thing is to embed all scripts from the Ace source folder into the web page manually, excluding the worker-xxx.js files. This is still a bodge though.
The answer from #rorofromfrance solve my problem of the base folder path on loading Ace script on the fly:
$.getScript($('#js')[0].href, function() {
$('.theme').change(function() {draw.change();});
$.getScript("/ace/src-min/ace.js", function() {
if (!editor) {ace.config.set("basePath", "/ace/src-min"); draw.editor();};
$.getScript("/underscore/underscore-min.js", function() {
editor.getSession().on('change', _.debounce(function() {draw.diagram();}, 100));
$.getScript("/tensorflow/tf.min.js", function() {
$.ajax({
type: "GET",
dataType: "xml",
url: "/sitemap.xml",
success: draw.getJSON(xml)
});
});
});
});
});
I have a similar requirement in a current project of mine.
I created an Angular project with all the files bundles in a single directory without access to node_modules in runtime, using a remote package for the ace basePath was out of the question.
Then I stumbled upon the Ace embedding guide and it clued me that I can import the relevant modes and themes straight from my dependencies and just use new instead of a path string.
https://ajaxorg.github.io/ace-api-docs/index.html#embedding-ace
from the docs:
var JavaScriptMode = ace.require("ace/mode/javascript").Mode;
editor.session.setMode(new JavaScriptMode());
So I just imported the mode and theme I went and provided them straight to Ace
import DraculaTheme from "ace-builds/src-noconflict/theme-dracula";
import JavaScriptMode from "ace-builds/src-noconflict/mode-javascript";
const aceEditor = ace.edit(this.editor.nativeElement);
aceEditor.session.setValue("function greet() {\n\tconsole.log('hello world');\n}\n");
aceEditor.setTheme(DraculaTheme);
aceEditor.session.setMode(new JavaScriptMode.Mode());
Notice that I didn't set any basePath !!!