I am working on a functionality in a Vuejs project, by which by clicking on a button, the user can export a pdf which will contain certain Vuejs components. All went smooth up to a point. I npm installed the 2 packages, jsPDF and html2canvas (which is a dependency).
I added jsPDF to the component like so:
import jsPDF from 'jspdf'
The function that gets triggered on button click is:
exportpdf() {
let pdf = new jsPDF('p', 'px', 'a4')
pdf.addHTML(this.$refs.userinfo, function() {
pdf.save('web.pdf')
})
}
When the function was triggered on button click, I got the following error:
Uncaught (in promise) Error: You need either https://github.com/niklasvh/html2canvas or https://github.com/cburgmer/rasterizeHTML.js...
And so, I got to this issue here:
Using jsPDF and html2canvas with es6 which explains that jsPDF requires html2canvas to be on the window. But this is just a huge no no in Vuejs (see article here):
https://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/
So, inspired by this article, I added the html2canvas package to main.js:
import html2canvas from 'html2canvas'
...
Vue.use(html2canvas)
Now, when the function is triggered I get this:
Uncaught (in promise) Provided element is not within a Document
I also tried with document.querySelector('#userinfo') - same result. So now I consider myself officially stuck - any help is greatly appreciated.
html2canvas is not a Vue plugin, so you cannot call use(...) on it.
You can make your own plugin though.
import html2canvas from 'html2canvas'
let MyPlugin = {
install(Vue, options) {
window.html2canvas = html2canvas
}
}
// ...
Vue.use(MyPlugin)
I am not really sure why you are opposed to window.html2canvas = html2canvas if another library needs it.
Related
I'm using the filepond library in my Angular project and I was wondering if anybody knew if it was possible to set an image to fit/fill by default when a user uploads?
Im not very familiar with filepond and Pintura but I've looked through some documentation and didn't see anything about this.
I think a plugin can help: Image resize plugin
How to add plugins with angular-filepond?
import { FilePond, registerPlugin } from 'angular-filepond';
// Registering plugins
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.esm';
registerPlugin(FilePondPluginFileValidateType);
// Adding FilePond to imports
#NgModule({
imports: [
FilePond
]
})
export class AppModule { }
Here are some infos from the plugins page:
The Image resize plugin automatically calculates and adds resize information.
The Image preview plugin uses this information to show the correct preview. The Image transform plugin uses this information to transform the image before uploading it to the server.
The picture shows some properties. imageResizeMode sounds useful I think.
Div around each node that shows up on tapping a node
I am trying to achieve as in this video - https://www.youtube.com/watch?v=IMN8j-AvZAE (The attached screenshot is from the video itself)
My question to the Cytoscape team is :
Assuming that in order to achieve the functionality as in the above-mentioned video and the attachment I will have to use popper extension of cytoscape and in order to do so do I have to download the popper.js and cytoscape-popper.js from GitHub and include them in my index.html via script tag and then initialize it using Cytoscape function of my index.js file? please advise and share a sample code for the same.
I was wondering if anyone has dealt with this plugin: http://alex-d.github.io/Trumbowyg/
I believe I'm doing everything right. The only thing is that svg icons are not showing up?
$('#trumbowyg-demo').trumbowyg({
svgPath: 'my-path-to-icons' //doesn't event work
});
Is the icons.svg file correct -- from the download?
This is what's showing up
I had the same issue. My problem was down to the fact I was using an ajaxPrefilter. Disabling this for the icons.svg request solved it. Try putting a breakpoint inside the following get method in the trumbowyg js file and see if the ajax request completes. That's how I found the solution to my issue
$.get(svgPath, function (data) {
div.innerHTML = new XMLSerializer().serializeToString(data.documentElement);
});
I use a plugin (in this example it is selectric). I only load the plugin javascript file on product pages.
The code I use is: jQuery('.myselectpicker').selectric({}); and is located in a custom javascript file witch is loaded on every page.
If I go to an other page then the product page, I get a jQuery(...).selectric is not a function error.
I understand why I get the error, because the plugin javascript file is not included in the head (only on product pages).
But is there something I can put around the jQuery('.myselectpicker').selectric({}); code so it doesn't return an error on other pages than the product page?
I don't want to add the code to the plugin javscript file or in a seperate javascript file only loaded on the product page.
And for performance reasons I don't want to include all javascript files on every page type.
You can use jquery's isFunction function - https://api.jquery.com/jQuery.isFunction/
// Will trigger selectric() function only if it's lib included
if( $.isFunction( $.fn.selectric ) ){
jQuery('.myselectpicker').selectric({});
}
An alternative to check if selectric is loaded is to check if any elements on your page need it, ie:
if (jQuery('.myselectpicker').length > 0)
jQuery('.myselectpicker').selectric({});
this will then give an error - so could be combined with isFunction (see other answer, no need to repeat here) - but, will let you know which pages need the plugin but are missing it, rather than just missing functionality without warning.
I want to make one div to slideOut, but I get an error..
Code
<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
window.addEvent('domready', function() {
var div = new Fx.Slide('divID');
div.slideOut();
});
The error is just below var div
Uncaught TypeError: undefined is not a function
Unfortunately the Fx.Slide helper is not part of Mootools Core, it is part of the More package. The CDN file you are loading is only the Core. You will need to find another CDN that hosts More, or serve it from your own server.
It looks like Google doesn't host More at the moment: http://code.google.com/p/google-ajax-apis/issues/detail?id=135
For more info, as it says right at the top of the main download page: http://mootools.net/download
From this page you can download the full MooTools Core. If you need more
functionality, head over to the More Builder.
So go here: http://mootools.net/more/ and check off any More features you want. Check off Fx.Slide and click download at the bottom of the page.