Skip to content

A
a-doc-editor
Commit 4dd20e64 by ramdayalmunda
Options

added custom font on PDF

parent 4fb7f746
Showing with 75 additions and 13 deletions
dist/assets/a-doc-editor.css
......@@ -110,7 +110,7 @@
.a-doc-editor .body .scrolling-area canvas.page {
background: #f3f3f3;
margin-bottom: 10px;
/* width: 100%; */
width: 100%;
box-shadow: 4px 0px 10px 4px rgba(0, 0, 0, 0.4);
}
......
dist/assets/a-doc-editor.js
let isModule = (typeof module != 'undefined') ? true : false
var ADocEditor = function (customConfig) {
var fs, path;
if (isModule) {
fs = require("fs");
path = require("path")
}
var styleTag;
var screenWidth = (typeof screen != 'undefined') ? screen.width : 1280
var counter = 7
var container = null
var mainComponent = null
var scrollingComponent = null
var headerComponent = null
var footerComponent = null
var leftSidebar = null
var rightSidebar = null
var fontList = []
var defaultConfig = {
element: "",
pageSetup: {
width: 210,
height: 110,
height: 297,
orientation: "p",
},
format: {
background: "#fff",
......@@ -22,7 +32,7 @@ var ADocEditor = function (customConfig) {
},
style: {
fontSize: 12,
fontFamily: 'times',
fontFamily: 'customfont',
bold: false,
italic: false,
fontColor: "#001"
......@@ -45,9 +55,9 @@ var ADocEditor = function (customConfig) {
},
]
// // paragraphs // this line is added only for testing please remove this on completion
dataSet = JSON.parse('[{"id":1,"type":0,"formatedText":[],"plainContent":"Rendering text in HTML canvas involves using the CanvasRenderingContext2D interface to display text content within a canvas element. This process allows for dynamic text display, enabling the creation of custom text effects, labels, captions, or textual elements within the canvas.","style":{"fontSize":12,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#001"}},{"id":2,"type":0,"plainContent":"To render text on a canvas, developers typically use the fillText() method provided by the Canvas API. This method allows the specification of text content, font styles, position, and color. Additionally, the measureText() method helps in determining the width of text, facilitating accurate positioning and layout arrangements.","style":{"fontSize":12,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#001"}},{"id":3,"type":0,"plainContent":"Text in canvas can be customized by setting various font properties like font family, font size, style (bold, italic), alignment, and color. However, canvas text rendering lacks the text reflow and responsive layout capabilities inherent in HTML and CSS.","style":{"fontSize":12,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#001"}},{"id":4,"type":0,"plainContent":"Despite its intricacies, canvas text rendering offers unparalleled creative freedom, enabling the development of immersive graphical experiences, custom typography, and visually stunning representations that enhance user engagement and interactivity within web-based applications and games.","style":{"fontSize":12,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#001"}},{"id":5,"type":0,"plainContent":"Developers often use canvas text rendering to create graphical representations of text-based information, such as game interfaces, data visualizations, charts, and diagrams. Despite its flexibility in text manipulation and artistic possibilities, rendering text in canvas may require additional manual adjustments for formatting, spacing, and alignment compared to traditional HTML text rendering.","style":{"fontSize":12,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#001"}}]')
dataSet = JSON.parse('[{"id":1,"type":0,"formatedText":[],"plainContent":"Rendering text in HTML canvas involves using the CanvasRenderingContext2D interface to display text content within a canvas element. This process allows for dynamic text display, enabling the creation of custom text effects, labels, captions, or textual elements within the canvas.","style":{"fontSize":12,"fontFamily":"customfont","bold":false,"italic":false,"fontColor":"#001"}},{"id":2,"type":0,"plainContent":"To render text on a canvas, developers typically use the fillText() method provided by the Canvas API. This method allows the specification of text content, font styles, position, and color. Additionally, the measureText() method helps in determining the width of text, facilitating accurate positioning and layout arrangements.","style":{"fontSize":12,"fontFamily":"customfont","bold":false,"italic":false,"fontColor":"#001"}},{"id":3,"type":0,"plainContent":"Text in canvas can be customized by setting various font properties like font family, font size, style (bold, italic), alignment, and color. However, canvas text rendering lacks the text reflow and responsive layout capabilities inherent in HTML and CSS.","style":{"fontSize":12,"fontFamily":"customfont","bold":false,"italic":false,"fontColor":"#001"}},{"id":4,"type":0,"plainContent":"Despite its intricacies, canvas text rendering offers unparalleled creative freedom, enabling the development of immersive graphical experiences, custom typography, and visually stunning representations that enhance user engagement and interactivity within web-based applications and games.","style":{"fontSize":12,"fontFamily":"customfont","bold":false,"italic":false,"fontColor":"#001"}},{"id":5,"type":0,"plainContent":"Developers often use canvas text rendering to create graphical representations of text-based information, such as game interfaces, data visualizations, charts, and diagrams. Despite its flexibility in text manipulation and artistic possibilities, rendering text in canvas may require additional manual adjustments for formatting, spacing, and alignment compared to traditional HTML text rendering.","style":{"fontSize":12,"fontFamily":"customfont","bold":false,"italic":false,"fontColor":"#001"}}]')
// // lists // this line is added only for testing please remove this on completion
dataSet = JSON.parse('[{"id":1,"type":0,"plainContent":"Here is a list of household items you need to buy if you are relocating and don\'t have anything with you but you still want go there and settle down.","style":{"fontSize":12,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":2,"type":1,"tabCount":0,"plainContent":"Recipie book for vegetarian noodles","style":{"fontSize":12,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":3,"type":1,"tabCount":0,"plainContent":"Noodles","style":{"fontSize":12,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":5,"type":1,"tabCount":0,"plainContent":"Garlic","style":{"fontSize":12,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":6,"type":1,"tabCount":0,"plainContent":"Some School stationaries for Arvind","style":{"fontSize":12,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":7,"type":1,"tabCount":1,"plainContent":"Full pack of pen","style":{"fontSize":12,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":8,"type":1,"tabCount":1,"plainContent":"Drawing kit","style":{"fontSize":12,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":9,"type":1,"tabCount":1,"plainContent":"2 register size notebook","style":{"fontSize":12,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":10,"type":1,"tabCount":0,"plainContent":"Window shields","style":{"fontSize":12,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":11,"type":1,"tabCount":0,"plainContent":"Mosquito repelant","style":{"fontSize":12,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]}]')
dataSet = JSON.parse('[{"id":1,"type":0,"plainContent":"Here is a list of household items you need to buy if you are relocating and don\'t have anything with you but you still want go there and settle down.","style":{"fontSize":12,"fontFamily":"customfont","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":2,"type":1,"tabCount":0,"plainContent":"Recipie book for vegetarian noodles","style":{"fontSize":12,"fontFamily":"customfont","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":3,"type":1,"tabCount":0,"plainContent":"Noodles","style":{"fontSize":12,"fontFamily":"customfont","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":5,"type":1,"tabCount":0,"plainContent":"Garlic","style":{"fontSize":12,"fontFamily":"customfont","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":6,"type":1,"tabCount":0,"plainContent":"Some School stationaries for Arvind","style":{"fontSize":12,"fontFamily":"customfont","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":7,"type":1,"tabCount":1,"plainContent":"Full pack of pen","style":{"fontSize":12,"fontFamily":"customfont","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":8,"type":1,"tabCount":1,"plainContent":"Drawing kit","style":{"fontSize":12,"fontFamily":"customfont","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":9,"type":1,"tabCount":1,"plainContent":"2 register size notebook","style":{"fontSize":12,"fontFamily":"customfont","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":10,"type":1,"tabCount":0,"plainContent":"Window shields","style":{"fontSize":12,"fontFamily":"customfont","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":11,"type":1,"tabCount":0,"plainContent":"Mosquito repelant","style":{"fontSize":12,"fontFamily":"customfont","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]}]')
var lines = []
......@@ -71,13 +81,14 @@ var ADocEditor = function (customConfig) {
config.pageSetup.fontMultiplier = config.pageSetup.canvasMultiplier / 3
config.pageSetup.canvasWidth = config.pageSetup.canvasMultiplier * config.pageSetup.width
config.pageSetup.canvasHeight = config.pageSetup.canvasMultiplier * config.pageSetup.height
console.log('pageSetup:', config.pageSetup)
if (!isModule) {
if (!config.element) throw "'container' not provided in the config"
if (typeof config.element == 'string') container = document.querySelector(config.element)
if (config.element instanceof HTMLElement) container = config.element
if (!container) throw "undefined"
styleTag = document.createElement('style')
let mainComponentId = `main-${new Date().getTime()}`
let headerComponentId = `header-${new Date().getTime()}`
let footerComponentId = `footer-${new Date().getTime()}`
......@@ -133,7 +144,11 @@ var ADocEditor = function (customConfig) {
</div>
</div>
`
addFonts(["./assets/fonts/customfont.woff", "./assets/fonts/customfont.ttf"], 'customfont')
container.innerHTML = htmlSetup
container.append(styleTag)
mainComponent = document.getElementById(mainComponentId)
headerComponent = document.getElementById(headerComponentId)
scrollingComponent = document.getElementById(scrollingAreaId)
......@@ -423,10 +438,10 @@ var ADocEditor = function (customConfig) {
function createNewCanvas() {
let canvas;
if (isModule){
if (isModule) {
const { createCanvas } = require('canvas')
canvas = createCanvas(config.pageSetup.canvasWidth, config.pageSetup.canvasHeight)
}else{
} else {
canvas = document.createElement('canvas')
let ctx = canvas.getContext('2d', { willReadFrequently: true })
canvas.setAttribute('class', 'page')
......@@ -623,14 +638,21 @@ var ADocEditor = function (customConfig) {
async function generatePDF(file) {
if (isModule) {
try{
try {
const { jsPDF } = require("jspdf")
console.log('to generate PDF on Server side:', file)
const doc = new jsPDF('p', 'px', [ config.pageSetup.canvasWidth, config.pageSetup.canvasHeight ]);
doc.text("Hello World", 10, 10)
const doc = new jsPDF(config.pageSetup.orientation, 'px', [config.pageSetup.canvasWidth, config.pageSetup.canvasHeight]);
const fontFilePath = path.join(__dirname, 'fonts', 'customfont.ttf')
// const fontFileContent = fs.readFileSync(fontFilePath);
doc.addFont(fontFilePath, 'customfont', 'normal');
doc.setFont('customfont');
doc.setFontSize(100)
doc.text('Hello World', 100, 100);
doc.save(file)
return file
}catch(err){
} catch (err) {
console.log(err)
return
}
......@@ -640,6 +662,45 @@ var ADocEditor = function (customConfig) {
}
}
function addFonts(paths, name) {
console.log('to add font', paths, name)
if (!isModule) {
console.log('existings', fontList)
if ( fontList.find( item => item.name.toLowerCase()==name.toLowerCase() ) ){
console.log('Font already exists')
return
}
let newStyle = `${styleTag.textContent}
@font-face {
font-family: '${name}';
src:
`
if (typeof paths == 'object'){
for (let i=0; i<paths.length; i++) {
let splitted = paths[i].split('.')
let format = splitted[splitted.length-1]
format = format=='ttf'?'truetype':format
newStyle +=`url('${paths[i]}') format('${format}')${(i==paths.length-1)?';':','}
`
}
}else{
let splitted = paths.split('.')
let format = splitted[splitted.length-1]
format = format=='ttf'?'truetype':format
newStyle+=`url('${paths}') format('${format}');`
}
newStyle+=`
}
`
styleTag.textContent = newStyle
container.append(styleTag)
}
fontList.push({
path: path,
name: name,
})
}
inititalize(customConfig)
......@@ -659,6 +720,7 @@ var ADocEditor = function (customConfig) {
getContent: function () {
return JSON.parse(JSON.stringify(dataSet))
},
addFonts: addFonts,
}
if (isModule) returnObj.generatePDF = generatePDF
return returnObj
......
dist/index.html
......@@ -18,7 +18,7 @@
</head>
<body>
<div class="body"></div>
<p>Click on the canvas and start typing
<p>Click on the <span style="font-family: 'customfont';">canvas</span> and start typing
<button onclick="extractData()">Extract</button>
<button onclick="setData()">Set Data</button>
<button onclick="generatePDF()">Generate PDF</button>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment