I searched all over the internet but found nothing. I know this is a noob question.
I installed jspdf and jspdf-autotable over npm in my vue project:
npm install jspdf --save
npm install jspdf-autotables --save
Packages installed successfully. I'm importing jspdf and jspdf-autotable in main.js file like that:
import jsPDF from 'jspdf';
import 'jspdf-autotable';
Vue.use(jsPDF)
Then in my .vue file I import jsPDF first:
import jsPDF from 'jspdf';
and then in mounted() hook:
let doc = new jsPDF();
doc.autoTable({ html: '#my-table' });
doc.save('table.pdf');
But autoTable is not imported. It says unresolved method or hook autotable. I get empty pdf.
I don't know how to import autoTable. Please help me. It's one day left to finish my job. Sorry I'm new to Vue js. Many thanks in advance!
Good question, but not necessary you use this in your main file, you can use this in your specific file (for performance reasons). The autotable is one complement to work with table in your JsPdf. This necessary only load the file in your component.
e.g.:
import JsPDFAutotable from 'jspdf-autotable'
and your component
components: { JsPDFAutotable }
you don't need the imports in the main.js file.
Do you import directly in your .vue file. that work well.
import jsPDF from 'jspdf'
import 'jspdf-autotable'
and then in mounted() hook:
let doc = new jsPDF();
doc.autoTable({ html: '#my-table' });
doc.save('table.pdf');
Related
How do we import js file from cdn?
I am building a custom component (a wrapper component) to view the pdf files. and for this I need to use pdf.js file from cdn and I am unable to import the file?
following does not work
import "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.min.js";
To import the JS file from CDN and use in vue.js component, you can use mounted lifecycle and there you need to append your script into DOM.
Then it will be available into your window global variable.
Working code example:
mounted () {
let pdfJS = document.createElement('script')
pdfJS.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.min.js')
document.head.appendChild(pdfJS)
// for checking whether it's loaded in windows are not, I am calling the below function.
this.checkPDFJSLib()
},
methods: {
checkPDFJSLib() {
console.log(window.pdfjsLib)
}
}
You can normally include it in your index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.min.js"></script>
Alternatively, you can use an npm library e.g vue-pdf
install it into your modules
npm install --save vue-pdf
and use it
import pdf from 'vue-pdf'
I have created an project in vuejs using vue-cli3. It working fine on chrome browser but in IE-11 version blank screen is shown with the following error in console as mentioned in this link: https://drive.google.com/file/d/1QaNwK1ekI2BwFsFyjvgbSsvwHBCmlcAD/view?usp=drivesdk
On clicking console error that I have pointed in above screenshot, it opens a screen as display in given link https://drive.google.com/file/d/1_QXVjcw3cmqeC70LfNyLcr__rnXVIZIh/view?usp=drivesdk with the error in mini-toastr package:
Here is my babel.config.js file code:
module.exports = {
presets: [
['#vue/app', {
polyfills: [
'es6.promise',
'es6.symbol'
]
}]
]
}
and .browserslistrc file code :
> 1%
last 2 versions
not ie <= 8
I am not getting where I am doing a mistake. Is anything I am missing? If anyone need some more info please let me know. Thanks!
I finally ended up with the solution of above issue. To run project on IE-11 version just follow the 2 steps:
Install babel-polyfill using command "npm install --save babel-polyfill".
Import babel-polyfill in your main.js or index.js file at the top of above all imported packages. For e.g Here is your main.js file.
Note: If you import babel-polyfill at the end it does't work.
import 'babel-polyfill'
import Vue from 'vue'
import Vuetify from 'vuetify'
import router from './router'
// include script file
import './lib/DemoScript'
// include all css files
import './lib/DemoCss'
Vue.use(Vuetify)
new Vue({
store,
router,
render: h => h(App),
components: { App }
}).$mount('#app')
Another solution: use the power of vue-cli-3 to leverage browser support: https://cli.vuejs.org/guide/browser-compatibility.html#modern-mode
Just one option when building and you're done once you've chosen browserslist to support :-)
This should work well for building an app.
Current i have a vue project that is setup using webpack.
I would like to start using element UI for my ui library.
After I did
npm i element-ui -S
in my terminal
and added the code below in my app.js (entry point of whole app)
import Vue from 'vue'
import ElementUI from 'element-ui';
Vue.use(ElementUI);
I am able to start using and stuff throughout the app.
however, I notice that the CSS is not being applied.
What should I do with the css? How do I tell elementUI to apply the default theme?
This worked fine for me:
npm i element-ui
in main.js:
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
if you like to localize, you should do:
import locale from 'element-ui/lib/locale/lang/en'
Vue.use(ElementUI, { locale })
or to set default size of elements to small:
Vue.use(ElementUI, { locale, size:'small' })
OK figured it out myself.
Looks like i just need to do
Install this npm package
Add import 'element-theme-default'; right after the elementUI import
Trying to get the Dragabilly Vue plugin to work with my Nuxt app: https://www.npmjs.com/package/vue-draggabilly
I've used the usual approach that has worked with similar plugins but I don't have the depth of knowledge to crack this one. I am adding into my nuxt config file:
plugins: [ { src: '~/plugins/vue-draggabilly.js', ssr: false } ]
That file includes this code:
import Vue from 'vue'
import VueDraggabilly from 'vue-draggabilly'
Vue.use(VueDraggabilly)
However, I get the following error and I'm not able to use:
vue-draggabilly.js:3 Uncaught ReferenceError: exports is not defined
This refers to this line in the plugin:
exports.install = function (Vue, options) { ....
It is a usual vuew plugin package, but I'm not sure how to get it to work with nuxt. Any help very greatly appreciated!
I see a warning:
warning in ./plugins/vue-draggabilly.js
4:8-22 "export 'default' (imported as 'VueDraggabilly') was not found in 'vue-draggabilly'
I don't know the best answer, but this seems to work:
import Vue from 'vue'
import * as VueDraggabilly from 'vue-draggabilly'
Vue.use(VueDraggabilly)
I've created a new vue app using vue init webpack sample-app .
I'm trying to import this module (https://docs.botui.org/install.html) into my app.vue and make it show on.
What's the correct way to import this module into a Vue.JS app?
Open the terminal in your project root folder, then install the package:
npm install botui --save
Then open src/main.js in your text editor and add this:
import Vue from 'vue'
import BotUI from 'botui'
const botui = BotUI('my-botui-app', {
vue: Vue // pass the dependency.
})
This will create a botui instance. But that instance won't have any messages in it. You can check that it's working by adding a message:
botui.message.bot('Hello, how can I help?')