I'm trying to export a web-app to MS Word using Docx.js in the browser but basic functions like Table or Media are not being recognized by the browser. Has anyone experienced this issue and if so, what is there a fix?.
I'm receiving the following error message in console:
"Uncaught ReferenceError: Table is not defined"
Below is my sample code:
<html>
<h1>DOCX browser Word document generation</h1>
<button type="button" onclick="generate()">Click to generate document</button>
<script>
function generate() {
const doc = new docx.Document();
const table = new Table({
rows: [
new TableRow({
children: [
new TableCell({
children: [new Paragraph("Hello")],
}),
new TableCell({
children: [new Paragraph("World!!!")],
}),
],
}),
new TableRow({
children: [
new TableCell({
children: [new Paragraph("bla bla bla")],
}),
new TableCell({
children: [new Paragraph("bla bla bla")],
}),
],
}),
],
});
doc.addSection({
properties: {},
children: [table],
});
docx.Packer.toBlob(doc).then(blob => {
console.log(blob);
saveAs(blob, "example.docx");
console.log("Document created successfully");
});
}
</script>
I was having a similar problem in node. I was getting ReferenceError: HeadingLevel is not defined. Researching this I found this issue opened in github https://github.com/dolanmiu/docx/issues/485. So I think you need to explicitly call docx before any of the docx declarations. For example.
rows: [
new docx.TableRow({
children: [
new docx.TableCell({
children: [new docx.Paragraph("Hello")],
}),
new docx.TableCell({
children: [new docx.Paragraph("World!!!")],
}),
],
}),
new docx.TableRow({
children: [
new docx.TableCell({
children: [new docx.Paragraph("bla bla bla")],
}),
new docx.TableCell({
children: [new docx.Paragraph("bla bla bla")],
}),
],
}),
],
});
Related
I am using Nuxt 2.14.3 and I want to use the fullcalendar library. For this I have added the following packages via Yarn:
yarn add #fullcalendar/vue
yarn add #fullcalendar/interaction
yarn add #fullcalendar/daygrid
yarn add #fullcalendar/timegrid
yarn add #fullcalendar/list
My Vue template file looks like this:
<template>
<client-only placeholder="loading...">
<FullCalendar class="demo-app-calendar" :options="calendarOptions">
<template #eventContent="arg">
<b>{{ arg.timeText }}</b>
<i>{{ arg.event.title }}</i>
</template>
</FullCalendar>
</client-only>
</template>
<script>
import FullCalendar from '#fullcalendar/vue'
import dayGridPlugin from '#fullcalendar/daygrid'
import timeGridPlugin from '#fullcalendar/timegrid'
import interactionPlugin from '#fullcalendar/interaction'
export default {
components: {
FullCalendar,
},
mixins: [
page({
meta() {
return {
title: this.$tU('meta_title_vrm_planning'),
}
},
}),
],
data() {
return {
calendarOptions: {
plugins: [
dayGridPlugin,
timeGridPlugin,
interactionPlugin, // needed for dateClick
],
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay',
},
initialView: 'dayGridMonth',
initialEvents: [
{
id: 1,
title: 'All-day event',
start: new Date().toISOString().replace(/T.*$/, ''),
},
{
id: 2,
title: 'Timed event',
start: `${new Date().toISOString().replace(/T.*$/, '')}T12:00:00`,
},
], // alternatively, use the `events` setting to fetch from a feed
editable: true,
selectable: true,
selectMirror: true,
dayMaxEvents: true,
weekends: true,
select: this.handleDateSelect,
eventClick: this.handleEventClick,
eventsSet: this.handleEvents,
/* you can update a remote database when these fire:
eventAdd:
eventChange:
eventRemove:
*/
},
currentEvents: [],
}
},
methods: {
handleDateSelect(selectInfo) {
const title = prompt('Please enter a new title for your event')
const calendarApi = selectInfo.view.calendar
calendarApi.unselect() // clear date selection
if (title) {
calendarApi.addEvent({
id: 3,
title,
start: selectInfo.startStr,
end: selectInfo.endStr,
allDay: selectInfo.allDay,
})
}
},
handleEventClick(clickInfo) {
if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
clickInfo.event.remove()
}
},
handleEvents(events) {
this.currentEvents = events
},
},
}
</script>
It gives me the following errors:
[Vue warn]: Error in mounted hook: "TypeError: DateProfileGeneratorClass is not a constructor"
found in
---> <FullCalendar>
and
TypeError: DateProfileGeneratorClass is not a constructor
at buildDateProfileGenerator (main.js?d610:7232)
and also
TypeError: Cannot read property 'destroy' of undefined
at VueComponent.beforeDestroy (FullCalendar.js?ff68:33)
Note: this works perfectly when accessing my page from another page, but when going directly to the page URL (or when clicking CTRL+F5) I receive the errors as mentioned above.
Note 2: I tried transpiling the library in Nuxt config as suggested in the example repo https://github.com/fullcalendar/fullcalendar-example-projects/tree/master/nuxt, but it gives me the exact same errors, but with the .ts files instead of the .js files.
I am trying to create a vis-network in vueJS 2.6
My vis-network version is 8.3.2
I get TypeError: Cannot read property 'Network' of undefined" in vis-network
following is my code
<div id="mynetwork"></div>
</template>
<script>
import vis from 'vis-network'
export default {
data() {
return {
network: null,
nodes: [
{ id: 1, shape: "circularImage"},
{ id: 2, shape: "circularImage"},
],
edges: [
{ from: 1, to: 2 },
],
options: {
},
},
container: "",
};
},
mounted() {
this.container = document.getElementById("mynetwork");
var data = {
nodes: this.nodes,
edges: this.edges,
};
this.network = new vis.Network(this.container, data, this.options);
},
};
</script>
Solved It by replacing the import statement
import {Network } from 'vis-network/standalone/umd/vis-network.min'
Jestjs gives me this error when I am testing a react component:
import {Session} from 'meteor/session' ". The error is "Cannot find module 'meteor/session' "
myTestFile
import PlanSetup from "../../../ui/pages/planSetup/planSetup";
let PlanSetupWrapper;
const PlansetupProps={
name: "string",
budget: "string",
lang: { english: "en",
French : "fr"
}
};
describe('<PlanSetup />', () => {
PlanSetupWrapper = mount(<PlanSetup {...PlansetupProps}/>);
it('All child components renders correctly', () => {
expect(PlanSetupWrapper).toMatchSnapshot();
});
});
**jest.config.js**
module.exports = {
moduleNameMapper: {
"^meteor/(.*)": "<rootDir>/imports/tests/mocks/meteor.js"
},
transform: {
"^.+\\.(js|jsx)?$": "babel-jest",
".+\\.(css|styl|less|sass|scss)$": "/home/megha/Megha/TVStack/dan-tvstack-ui/node_modules/jest-css-modules-transform",
},
moduleFileExtensions: [
'js',
'jsx'
],
modulePaths: [
"<rootDir>/node_modules/"
],
globals: {
"window": true
},
unmockedModulePathPatterns: [
'/^imports\\/.*\\.jsx?$/'
],
setupFiles: [
"<rootDir>/setupTests.js"
]
};
**<rootDir>/imports/tests/mocks/meteor.js**
exports._session = {
__: function(value) { return value }
};
Welcome to Stack Overflow #MeghaRawat. There are a couple of things to consider here.
1) Keeping your components pure
2) Mocking up Meteor services
What this means is that any React components should be as pure as possible, and not reference Meteor - the containers should do that, and pass props to the components.
Jest doesn't know about Meteor, so any Meteor features will need to be stubbed, to prevent the the kind of problems you are encountering.
I may be able to find some code to help you if you need it.
I've been trying to make sure that the load event in the Rally.ui.grid.Grid is firing since I have a problem because my Grid is not filtering. I tried calling the methods myStore.setFilter() and myStore.load(), these two are firing, but I can't be sure the Grid is working properly since the first time, when it all loads, it does the filtering right, but then when I change the dropdown or combobox it doesn't.
This is how I load myStore:
this.myStore=Ext.create("Rally.data.wsapi.Store",{
model:"Task",
autoLoad:true,
filters: myFilters,
listeners:{
load:function(myStore,myData,success){
if(!this.myGrid) //IT CREATES THE GRID FOR THE FIRST TIME
{
this._loadGrid(myStore)
console.log('Grid Created!');
// this.myStore.setFilter();
// this.myStore.load();
}
else
{
this.myStore.setFilter();
//this.myStore.load();
console.log('Grid reloaded!');
console.log(myFilters);
}
},
scope:this
},
fetch:["FormattedID","State","Iteration", "Release"]
}
)
}
And this is how I load myGrid:
_loadGrid:function(myStoryStore){
this.myGrid = Ext.create("Rally.ui.grid.Grid",{
store:myStoryStore,
columnCfgs:["FormattedID","State","Iteration", "Release"],
listeners: {
load: function(myGridy){
console.log('myGrid did load!');
},
scope:this
}
});
this.add(this.myGrid);
}
Here is an example by David Thomas from his videos on building Rally apps that uses reconfigure method to which a store is passed: _myGrid.reconfigure(myStore)
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
var relComboBox = Ext.create('Rally.ui.combobox.ReleaseComboBox',{
listeners:{
ready: function(combobox){
//console.log('loaded release name', combobox.getRecord().get('Name')); //getRecord() returns currently selected item
var releaseRef = combobox.getRecord().get('_ref');
this._loadStories(releaseRef);
//console.log('what is this', this);
},
select: function(combobox){
var releaseRef = combobox.getRecord().get('_ref');
this._loadStories(releaseRef);
},
scope: this
}
});
this.add(relComboBox);
},
_loadStories: function(releaseRef){
console.log('loading stories for ', releaseRef);
var myStore = Ext.create('Rally.data.WsapiDataStore',{
model: 'User Story',
autoLoad:true,
fetch: ['Name','ScheduleState','FormattedID'],
filters:[
{
property : 'Release',
operator : '=',
value : releaseRef
}
],
listeners: {
load: function(store,records,success){
console.log("loaded %i records", records.length);
this._updateGrid(myStore);
},
scope:this
}
});
},
_createGrid: function(myStore){
console.log("load grid", myStore);
this._myGrid = Ext.create('Ext.grid.Panel', {
title: 'Stories by Release',
store: myStore,
columns: [
{text: 'ID', dataIndex: 'FormattedID', flex: 1},
{text: 'Story Name', dataIndex: 'Name', flex: 2},
{text: 'Schedule State', dataIndex: 'ScheduleState', flex: 2}
],
height: 400
});
this.add(this._myGrid);
},
_updateGrid: function(myStore){
if(this._myGrid === undefined){
this._createGrid(myStore);
}
else{
this._myGrid.reconfigure(myStore);
}
}
});
I have a search bar on the top of a page where user can type any word. I want to display the names of the songs which contain the word typed by user. How to design this using enyo.js?
Made a little fiddle with comments especialy for you :)
http://jsfiddle.net/joopmicroop/NEYQC/
enyo.kind({
name: 'App',
kind: enyo.Control,
components: [
{kind: 'FittableRows', components:[
{name: 'footer', kind: 'onyx.Toolbar', components: [
{kind: "onyx.InputDecorator", components: [
{kind: "onyx.Input", name:"inputfield", placeholder: "Search number"},
]},
{kind: "onyx.Button", content: "Search", ontap: "search"},
]},
{kind: "List", fit: true, name:'list', classes:'list', count: 20, fixedHeight: true, onSetupItem: "setupItem", components: [
{name: "item", classes:'listitem', ontap: "itemTap", components: [
{tag:'span', name: "name", content:"song name"},
{tag:'span', name: "index", content:"", style:'float:right;'}
]},
]},
]}
],
searchstring:'',
search: function(inSender, inEvent) {
console.log('search tapped');
console.log('inputfield value: ', this.$.inputfield.getValue());
console.log('list: ', this.$.item);
console.log('searchstring: ',this.searchstring);
this.searchstring = this.$.inputfield.getValue();
this.$.list.refresh();
},
setupItem: function(inSender, inEvent) {
// just to have something to fill in
var data = ['alibaba', 'alibobo', 'alibibi'];
this.$.index.setContent(inEvent.index);
this.$.name.setContent(data[inEvent.index %3]);
// if searchstring isn't emty get to work
if(this.searchstring != ''){
var regex = new RegExp(this.searchstring); // = /searchstrin/g
if(this.$.name.getContent().search(regex) != -1){ // -1 = not found
this.$.list.select(inEvent.index, true); // set state selected true
}
// if selected = true change add css class
this.$.item.addRemoveClass("listitemselected", inSender.isSelected(inEvent.index));
}
},
itemTap: function(inSender, inEvent) {
alert("You tapped on row: " + inEvent.index);
},
});
i got a sample posted here as part of my enyojs tutorial, but it uses a third party library called taffyDB here