Comments (1)
Hello @duffimc, I apologize for my extremely late reply. Did you find a solution to your problem? If not, I will describe a solution below.
To place a table at the top of the page, simply make the table object the first value in your data array.
Example:
const data = [
{
type: 'table',
style: {border: '1px solid #ddd'}, // style the table
// list of the columns to be rendered in the table header
tableHeader: [{type: 'text', value: 'People'}, {
type: 'image',
path: 'https://randomuser.me/api/portraits/men/13.jpg'
}],
// multidimensional array depicting the rows and columns of the table body
tableBody: [
[{type: 'text', value: 'Marcus'}, {
type: 'image',
url: 'https://randomuser.me/api/portraits/men/43.jpg'
}],
[{type: 'text', value: 'Boris'}, {
type: 'image',
url: 'https://randomuser.me/api/portraits/men/41.jpg'
}],
[{type: 'text', value: 'Andrew'}, {
type: 'image',
url: 'https://randomuser.me/api/portraits/men/23.jpg'
}],
[{type: 'text', value: 'Tyresse'}, {
type: 'image',
url: 'https://randomuser.me/api/portraits/men/53.jpg'
}],
],
// list of columns to be rendered in the table footer
tableFooter: [{type: 'text', value: 'People'}, 'Image'],
// custom style for the table header
tableHeaderStyle: {backgroundColor: 'red', color: 'white'},
// custom style for the table body
tableBodyStyle: {'border': '0.5px solid #ddd'},
// custom style for the table footer
tableFooterStyle: {backgroundColor: '#000', color: 'white'},
},
{
type: 'image',
url: 'https://randomuser.me/api/portraits/men/43.jpg', // file path
position: 'center', // position of image: 'left' | 'center' | 'right'
width: '60px', // width of image in px; default: auto
height: '60px',
}, {
type: 'text', // 'text' | 'barCode' | 'qrCode' | 'image' | 'table
value: 'SAMPLE HEADING',
style: {fontWeight: "700", textAlign: 'center', fontSize: "24px"}
}
];
PosPrinter.print(data, options)
.then(console.log)
.catch((error) => {
console.error(error);
});
Results
from electron-pos-printer.
Related Issues (20)
- Documents larger than the electron window do not print completely. HOT 3
- Sample: type text can be an html string HOT 1
- dist folder deleted HOT 5
- Cannot find module 'electron-pos-printer' or its corresponding type declarations. I am using nextron HOT 1
- version 1.3.7 have no dist folder in node modules , so it is throwing error, 1.3.6 works fine HOT 8
- [1092:0605/115531.410:ERROR:print_render_frame_helper.cc(2264)] Printing failed. HOT 17
- Paper Size Issue - Only in Ubuntu
- Length of label is really long and unable to shorten it.
- Can't configure the package using electron-vuejs
- Cannot find module 'electron-pos-printer' or its corresponding type declarations. HOT 3
- Image width MINE type url can't work accurately.
- [Fix] - Silent Print not wokring. HOT 6
- Application remains running on the background after closing HOT 1
- Why is the connection always wrong
- How to align barcode to the center of the print HOT 2
- Please Fix the typo in the model
- Margin, table padding, default font HOT 1
- Not able to hide the Border between Row with type = TABLE HOT 3
- Pass custom html file to to pathTemplate HOT 1
- Thermal print is breaking to pieces (Multiple pages) HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from electron-pos-printer.