I'm trying to use jsPDF with Vue but I get a ReferenceError: jsPDF is not defined. See the snippet :
let jsPrint = () => {
const doc = new jsPDF()
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<button onclick="jsPrint()">
print
</button>
The script is linked in the head tag :
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= $site->title() ?> - <?= $page->title() ?></title>
<link rel="stylesheet" href="<?= url('assets') ?>/css/style.css">
<!--========== JSPDF ==========-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<!--========== VUE ==========-->
<!-- development version, includes helpful console warnings -->
<script src="<?= url('assets') ?>/js/libs/vue.js"></script>
<script src="<?= url('assets') ?>/js/app.js" type="module" defer></script>
</head>
Then in a component, I have a method that should be triggered on click on a button :
exportSimple: function() {
const doc = new jsPDF()
// const target = document.querySelector('#dialog-export-content')
// doc.html(target, {
// callback: function(doc) {
// doc.save()
// },
// x: 10,
// y: 10
// })
}
But i throws an error.
I tried alternative methods to link the library : local, npm, other sources like jspdf.es.min.js. Nothing works.
Any idea ?
Using CDN the jsPDF object is available as property of jspdf which is available globally :
const { jsPDF } = jspdf
let print = () => {
const doc = new jsPDF()
}
Related
I am trying to build a quasar app as a web component, for which I am planning to use vue custom element.
I did the following changes,
import { boot } from 'quasar/wrappers';
import { defineCustomElement } from 'vue';
//#ts-ignore
import vueCustomElement from 'vue-custom-element';
import * as BaseApp from './../App.vue';
import { App } from "vue";
let custElement: any;
export default boot(({app,router,store}) => {
custElement = vueCustomElement;
//#ts-ignore
BaseApp.default.store = store;
//#ts-ignore
BaseApp.default.router = router;
const CustomElement = defineCustomElement({props:BaseApp.default.props,setup:BaseApp.default.setup,name:BaseApp.default.name,store:BaseApp.default.store,router:BaseApp.default.router})
customElements.define('test-app', CustomElement)
});
export { custElement };
Did the following changes in quasar.conf.js file to disable chunking
chainWebpack: (config) => {
config.resolve.symlinks(false);
config.optimization.splitChunks(false);
config.output.filename('js/app.js');
},
filenameHashing: false,
pluginOptions: {
webpackBundleAnalyzer: {
openAnalyzer: false,
},
},
configureWebpack: {
output: {
libraryExport: 'default',
},
devServer: {
disableHostCheck: true,
},
},
extendWebpack(cfg) {
cfg.plugins.push(
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1,
})
);
const vueLoaderRule = cfg.module.rules
.find(el => el.test.toString() == /\.vue$/.toString())
const ruleFirstLoader = vueLoaderRule.use[0]
const options = ruleFirstLoader.options
// change options
options.transpileOptions = {
transforms: {
dangerousTaggedTemplateString: true
}
}
},
Added the custom element in the index.template.html file
<!DOCTYPE html>
<html>
<head>
<title><%= productName %></title>
<meta charset="utf-8">
<meta name="description" content="<%= productDescription %>">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
<link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
<link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
<link rel="icon" type="image/ico" href="favicon.ico">
</head>
<body>
<!-- DO NOT touch the following DIV -->
<!-- <div id="q-app"></div> -->
<test-app id="q-app"></test-app>
</body>
</html>
When running the app, the rendered html content will look like the below,
Rendered Vue Custom Element
I am not sure where the issue is. It would be grateful if I got any suggestions to solve this issue.
Thanks in advance for your help.
I am learning Vue.js and would like to implement the bulma-calendar module in my app. I came this far, but the calendar is somehow not updating, when I am selecting a new Date.
Sorry if I can't specify the problem more, as I said declarative programming is very new to me.
The template I got from the official website of bulma-calendar: https://demo.creativebulma.net/components/calendar/v6//#integration
Vue.component("comp-calendar", {
template: `
<div>
<input ref="calendarTrigger" type="date">
</div>
`,
data: function () {
return {
date: new Date(),
};
},
mounted: function () {
const options = {
type: "date",
color: "danger",
dateFormat: "DD-MM-YYYY",
startDate: this.date,
displayMode: "inline",
};
const calendar = bulmaCalendar.attach(
this.$refs.calendarTrigger,
options
)[0];
calendar.on("date:selected", (e) => (this.date = e.date));
},
});
var app = new Vue({
el: "#app",
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- import bulma -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.1/css/bulma.min.css">
<!-- import bulma-calendar -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-calendar#6.0.9/dist/css/bulma-calendar.min.css">
</head>
<body>
<div id="app">
<comp-calendar></comp-calendar>
</div>
<!-- import bulma-calendar -->
<script src="https://cdn.jsdelivr.net/npm/bulma-calendar#6.0.9/dist/js/bulma-calendar.min.js"></script>
<!-- import https://vuejs.org -->
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12/dist/vue.js"></script>
<script src="src/js/test.js"></script>
</body>
Any help? Thanks
EDIT: Did not help:
[...]
<input type="date">
[...]
const calendar = bulmaCalendar.attach('[type="date"]', options)[0];
calendar.on("select", (e) => (this.date = e.date))
Probably a bug in 6.0.9. Working with 6.0.0 (according to documentation here: https://creativebulma.net/product/calendar/demo) worked fine.
calendar.on("select", (e) => (this.date = e.date))
here this.date is incorect. this "this" is calendar object not the vue object
I have downloaded a vue.js template from the web. Whenever I build files via npm the title on the index.html keeps being swapped to the name of the template. Is there a way to change the default title?
As I understand your question - you need to configure your vue.config.js file something like this (pay attention on Webpack part) - these files are from working project, so you have maximum understanding on how it could look at the end:
module.exports = {
baseUrl: '/',
outputDir: (process.env.NODE_ENV === 'production' ? '../web/' : '../web/js/'),
indexPath: '../app/Resources/views/index.html.twig',
// Setting this to false can speed up production builds if you don't need source maps for production.
productionSourceMap: false,
// By default, generated static assets contains hashes in their filenames for better caching control.
// However, this requires the index HTML to be auto-generated by Vue CLI. If you cannot make use of the index HTML
// generated by Vue CLI, you can disable filename hashing by setting this option to false,
filenameHashing: false,
lintOnSave: false,
// https://cli.vuejs.org/ru/config/#devserver-proxy
devServer: {},
// https://cli.vuejs.org/ru/config/#chainwebpack
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title = 'Ojok Deep Sales Platform';
args[0].template = './index.html.template';
return args;
})
}
};
And after you have updated your vue.config.js file, change your index.html template file to be like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title><%= htmlWebpackPlugin.options.title %></title>
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900' rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="../js/go.js"></script>
<script type="text/javascript" src="../js/momentjs.js"></script>
<script type="text/javascript" src="../js/webphone/flashphoner.js"></script>
<script type="text/javascript" src="../js/webphone/SoundControl.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
Pay attention on what is being included in <title>-tag:
<title><%= htmlWebpackPlugin.options.title %></title>
After generating new index.html file your title should be set to whatever you have written into args[0].title option.
Hope this helps.
I'm still new at VueJS, but here were my findings. I'd love any suggested options or improvements. I went with option #2.
Option 1: set for Multiple Pages mode
vue.config.js
module.exports = {
pages: {
index: {
entry: 'src/main.js',
// template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
title: 'My Website Title',
},
}
}
Option 2: titleMixin (referenced from https://medium.com/#Taha_Shashtari/the-easy-way-to-change-page-title-in-vue-6caf05006863)
titleMixin.js added to mixins folder
function getTitle (vm) {
const { title } = vm.$options
if (title) {
return typeof title === 'function'
? title.call(vm)
: title
}
}
export default {
created () {
const title = getTitle(this)
if (title) {
document.title = title
}
}
}
added to main.js
import titleMixin from './mixins/titleMixin'
Vue.mixin(titleMixin)
Use in Component Pages
<script>
export default {
title: 'Foo Page'
}
</script>
Use in Vue instance with a function
<script>
export default {
title () {
return `Foo Page — ${this.someValue}`
},
data () {
return {
someValue: 'bar'
}
}
}
</script>
Option 1:
Edit your /public/index.html and replace this:
<title><%= htmlWebpackPlugin.options.title %></title>
with this:
<title>Your Title Here</title>
Option 2:
vue.config.js
module.exports = {
chainWebpack: config => {
config.plugin('html').tap(args => {
args[0].title = 'Your Title Here';
return args;
});
}
}
/public/index.html
<title><%= htmlWebpackPlugin.options.title %></title>
Can you please take a look at this code and let me why I am not able to add a Package dbootstrap into the dojo toolkit?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body class='dbootstrap'>
<div class="jumbotron">
<h1 id="greeting">app</h1>
</div>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
var dojoConfig = {
packages: [
{
location: '/dbootstrap',
name: 'dbootstrap'
}
]
};
require([
'dbootstrap',
'dojo/dom',
'dojo/dom-construct'
], function(dbootstrap, dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<i> Test!</i>', greetingNode);
});
</script>
</body>
</html>
As you can see in this image I already added the dbootstrap folder into the root directory
but I am getting these errors:
The dojoConfig need to be declared before including dojo.js, so, this should work for you
<script type="text/javascript">
var dojoConfig = {
packages: [
{
location: '/dbootstrap',
name: 'dbootstrap'
}
]
};
</script>
<!-- load Dojo -->
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script type="text/javascript">
require([
'dbootstrap',
'dojo/dom',
'dojo/dom-construct'
], function(dbootstrap, dom, domConstruct) {
var greetingNode = dom.byId('nodeId');
domConstruct.place('<i> Test!</i>', greetingNode);
});
</script>
I have problems with rendering a datagrid in my custom widget.
I was able to pinpoint the problem to this: datagrids that are not a direct child of the body do do not render correctly.
Showcase:
<!DOCTYPE html>
<html>
<head>
<title>Problems with datagrid</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css" media="screen">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojox/grid/resources/Grid.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojox/grid/resources/claroGrid.css">
</head>
<body class="claro">
<div id="outer"> </div>
<div><div id="inner"> </div></div>
<script>
dojoConfig = {
isDebug: true,
async: true,
has: {
"dojo-firebug": true,
"dojo-debug-messages": true
}
};
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js" data-dojo-config="async: true"></script>
<script>
require([
"dojo/parser",
"dojo/ready",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojox/grid/DataGrid"
], function(parser, ready, Memory, ObjectStore, DataGrid){
createOuterGrid = function(){
var data = [{id:12,name:'outer'},{id:13,name:'blabla'}];
var dataStore = new ObjectStore({ objectStore:new Memory({ data:data }) });
var grid = new DataGrid({
store:dataStore,
items:data,
structure:[
{name:"ID", field:"id", width:"20%"},
{name:"Name", field:"name", width:"80%"}
]
}, "outer");
grid.startup();
};
createInnerGrid = function(){
var data = [{id:12,name:'inner'},{id:13,name:'blabla'}];
var dataStore = new ObjectStore({ objectStore:new Memory({ data:data }) });
var grid = new DataGrid({
store:dataStore,
items:data,
structure:[
{name:"ID", field:"id", width:"20%"},
{name:"Name", field:"name", width:"80%"}
]
}, "inner");
grid.startup();
};
parser.parse();
ready(function(){
createOuterGrid();
createInnerGrid();
});
});
</script>
</body>
</html>
Is there a way to make this work? Should I log it somewhere ?
I originally posted my question here:
dojo stackcontainer contains custom widget that uses datagrid, but dategrid not showing up
but then I didn't know that it was caused by the fact that a datagrid should be a direct child of the body.
Grid need a parent height. Is documented somewhere.
Set a height for inner Div parent will do the magic.
This is just so happen the parent for outter div is body.