jsPDF Tutorial to Add Bold & Colored Fonts to Multiline or Single line PDF Document in Browser Using Javascript

<header>
  <h1>jspdf - mixed normal and bold font</h1>
  <h2>with the help of double asterix markers</h2>
  <i>somehow printing multiple times adds more text. shouldnt happen normally</i>
</header>

<section style="background:#bbb">
  <h3>for one-line text</h3>
<input type="text" id="oneline" value="this is **bold and** normal font in just one **line**." />
<button id="printOneline">generate PDF</button>
</section>
<section style="background:#aaa">
  <h3>for mutli-line text</h3>
  <i>markers cause lines to be shorter as they can</i>
  <textarea id="multiline">this shall be the multi-line text with **bold words** and normal font mixed up. this will need some **more text with** slightly different cases inside.
**when** there **are** lots **of** bold **markers** the **text** shrinks **in** that **line**. yes because of splitTextToSize calculates the markers in.</textarea>
<button id="printMultiline">generate PDF</button>
</section>
<section style="background:#999">
  <h3>for mutli-line text 2</h3>
  <i>now whole bold text-lines can get printed over borders</i>
  <textarea id="multiline2">this shall be the multi-line text with **bold words** and normal font mixed up. this will need some **more text with** slightly different cases inside.
**when** there **are** lots **of** bold **markers** the **text** shrinks **in** that **line**. yes because of splitTextToSize calculates the markers in. **which is fixed with this technique. but whole bold lines will get slightly over the borders of the pritnable area.** because bold font is normally wider than normal weighted text.</textarea>
<button id="printMultiline2">generate PDF</button>
</section>


<style>

// just styling, no essential functionality here...
body {
  font-family: sans-serif;
}

input,
textarea {
  width: 33rem;
}

textarea {
  height: 11rem;
}

i {
  display: block
}

header {
  padding: 1rem;
  background: #efefef;
}

section {
  padding: 1rem 1rem 2rem;
}

</style>

<script>


// setup config
const fontSize = 13;
const lineSpacing = 12;

// ><><><><><><><<><><<><
// ONELINE EVENT
// ><><><><><><><<><><<><
document.getElementById("printOneline").addEventListener("click", function(){
  let startX = 12;
  let startY = 20;
  const doc = new jsPDF("p", "pt");
doc.setFont("arial")
  .setFontSize(fontSize)
  .setFontStyle("normal");
  
  const inputValue = document.getElementById("oneline").value;

  const arrayOfNormalAndBoldText = inputValue.split('**');
  arrayOfNormalAndBoldText.map((text, i) => {
    doc.setFontType("bold");
    // every even item is a normal font weight item
    if (i % 2 === 0) {
      doc.setFontType("normal");
    }
    doc.text(text, startX, startY);
    startX = startX + doc.getStringUnitWidth(text) * fontSize;
  });
  
  doc.save(`boldAndNormal-oneline.pdf`);
});

// ><><><><><><><<><><<><
// MULTILINE EVENT
// ><><><><><><><<><><<><
document.getElementById("printMultiline").addEventListener("click", function(){
  let startX = 12;
  let startY = 20;
  const doc = new jsPDF("p", "pt");
doc.setFont("arial")
  .setFontSize(fontSize)
  .setFontStyle("normal");
  
  const inputValue = document.getElementById("multiline").value;
  const endX = 360;
  // red marks to make textwidth visible
  doc.setDrawColor('#ff0000');
  doc.setLineWidth(1);
  doc.line(startX, startY - 10, startX, startY + 200);
  doc.line(endX, startY - 10, endX, startY + 200);
  let textMap = doc.splitTextToSize(
    inputValue,
    endX
  );
  
  const startXCached = startX;
    let boldOpen = false;
    textMap.map((text, i) => {
        if (text) {
            const arrayOfNormalAndBoldText = text.split('**');
            const boldStr = 'bold';
            const normalOr = 'normal';
            arrayOfNormalAndBoldText.map((textItems, j) => {
                doc.setFontType(boldOpen ? normalOr : boldStr);
                if (j % 2 === 0) {
                    doc.setFontType(boldOpen ? boldStr : normalOr);
                }
                doc.text(textItems, startX, startY);
                startX = startX + doc.getStringUnitWidth(textItems) * fontSize;
            });
            boldOpen = isBoldOpen(arrayOfNormalAndBoldText.length, boldOpen);
            startX = startXCached;
            startY += lineSpacing;
        }
    });
  
  doc.save(`boldAndNormal-multiline.pdf`);
});

const isBoldOpen = (arrayLength, valueBefore = false) => {
    const isEven = arrayLength % 2 === 0;
    const result = valueBefore !== isEven;

    return result;
}

// ><><><><><><><<><><<><
// MULTILINE EVENT 2
// ><><><><><><><<><><<><
document.getElementById("printMultiline2").addEventListener("click", function(){
  let startX = 12;
  let startY = 20;
  const doc = new jsPDF("p", "pt");
doc.setFont("arial")
  .setFontSize(fontSize)
  .setFontStyle("normal");
  
  let inputValue = document.getElementById("multiline2").value;
  const endX = 360;
  // red marks to make textwidth visible
  doc.setDrawColor('#ff0000');
  doc.setLineWidth(1);
  doc.line(startX, startY - 10, startX, startY + 200);
  doc.line(endX, startY - 10, endX, startY + 200);
  
  const regex = /(\*{2})+/g; // all "**" words
  const textWithoutBoldMarks = inputValue.replace(regex, '');

  let splitTextWithoutBoldMarks = doc.splitTextToSize(
      textWithoutBoldMarks,
      360
  );

  let charsMapLength = 0;
  let position = 0;
  let isBold = false;

  // <><>><><>><>><><><><><>>><><<><><><><>
  // power algorithm to determine which char is bold
  let textRows = splitTextWithoutBoldMarks.map((row, i) => {
      const charsMap = row.split('');

      const chars = charsMap.map((char, j) => {
         position = charsMapLength + j + i;

         let currentChar = inputValue.charAt(position);

         if (currentChar === "*") {
            const spyNextChar = inputValue.charAt(position + 1);
            if (spyNextChar === "*") {
               // double asterix marker exist on these position's so we toggle the bold state
               isBold = !isBold;
               currentChar = inputValue.charAt(position + 2);

                // now we remove the markers, so loop jumps to the next real printable char
                let removeMarks = inputValue.split('');
                removeMarks.splice(position, 2);
                inputValue = removeMarks.join('');
              }
         }

         return { char: currentChar, bold: isBold };
      });
      charsMapLength += charsMap.length;

      return { ...chars };
  });
 
  
 printCharacters(doc, textRows, startY, startX, fontSize, lineSpacing);
  
  doc.save(`boldAndNormal-multiline2.pdf`);
});

const printCharacters = (doc, textObject, startY, startX, fontSize, lineSpacing) => {
    const startXCached = startX;
    const boldStr = 'bold';
    const normalStr = 'normal';

    textObject.map(row => {

        Object.entries(row).map(([key, value]) => {
            doc.setFontType(value.bold ? boldStr : normalStr);

            doc.text(value.char, startX, startY);
            startX = startX + doc.getStringUnitWidth(value.char) * fontSize;
        });
        startX = startXCached;
        startY += lineSpacing;
    });
};


</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

<h1>jspdf - mixed normal and bold font</h1>

<h2>with the help of double asterix markers</h2>

<i>somehow printing multiple times adds more text. shouldnt happen normally</i>

</header>

<button id="printOneline">generate PDF</button>

</section>

<h3>for mutli-line text</h3>

<i>markers cause lines to be shorter as they can</i>

<textarea id="multiline">this shall be the multi-line text with **bold words** and normal font mixed up. this will need some **more text with** slightly different cases inside.

**when** there **are** lots **of** bold **markers** the **text** shrinks **in** that **line**. yes because of splitTextToSize calculates the markers in.</textarea>

<button id="printMultiline">generate PDF</button>

</section>

<h3>for mutli-line text 2</h3>

<i>now whole bold text-lines can get printed over borders</i>

<textarea id="multiline2">this shall be the multi-line text with **bold words** and normal font mixed up. this will need some **more text with** slightly different cases inside.

**when** there **are** lots **of** bold **markers** the **text** shrinks **in** that **line**. yes because of splitTextToSize calculates the markers in. **which is fixed with this technique. but whole bold lines will get slightly over the borders of the pritnable area.** because bold font is normally wider than normal weighted text.</textarea>

<button id="printMultiline2">generate PDF</button>

</section>

<style>

// just styling, no essential functionality here...

body {

font-family: sans-serif;

}

input,

textarea {

width: 33rem;

}

textarea {

height: 11rem;

}

i {

display: block

}

header {

padding: 1rem;

background: #efefef;

}

section {

padding: 1rem 1rem 2rem;

}

</style>

// setup config

const fontSize = 13;

const lineSpacing = 12;

// ><><><><><><><<><><<><

// ONELINE EVENT

// ><><><><><><><<><><<><

document.getElementById("printOneline").addEventListener("click", function(){

let startX = 12;

let startY = 20;

const doc = new jsPDF("p", "pt");

doc.setFont("arial")

.setFontSize(fontSize)

.setFontStyle("normal");

const inputValue = document.getElementById("oneline").value;

const arrayOfNormalAndBoldText = inputValue.split('**');

arrayOfNormalAndBoldText.map((text, i) => {

doc.setFontType("bold");

// every even item is a normal font weight item

if (i % 2 === 0) {

doc.setFontType("normal");

}

doc.text(text, startX, startY);

startX = startX + doc.getStringUnitWidth(text) * fontSize;

});

doc.save(`boldAndNormal-oneline.pdf`);

});

// ><><><><><><><<><><<><

// MULTILINE EVENT

// ><><><><><><><<><><<><

document.getElementById("printMultiline").addEventListener("click", function(){

let startX = 12;

let startY = 20;

const doc = new jsPDF("p", "pt");

doc.setFont("arial")

.setFontSize(fontSize)

.setFontStyle("normal");

const inputValue = document.getElementById("multiline").value;

const endX = 360;

// red marks to make textwidth visible

doc.setDrawColor('#ff0000');

doc.setLineWidth(1);

doc.line(startX, startY - 10, startX, startY + 200);

doc.line(endX, startY - 10, endX, startY + 200);

let textMap = doc.splitTextToSize(

inputValue,

endX

);

const startXCached = startX;

let boldOpen = false;

textMap.map((text, i) => {

if (text) {

const arrayOfNormalAndBoldText = text.split('**');

const boldStr = 'bold';

const normalOr = 'normal';

arrayOfNormalAndBoldText.map((textItems, j) => {

doc.setFontType(boldOpen ? normalOr : boldStr);

if (j % 2 === 0) {

doc.setFontType(boldOpen ? boldStr : normalOr);

}

doc.text(textItems, startX, startY);

startX = startX + doc.getStringUnitWidth(textItems) * fontSize;

});

boldOpen = isBoldOpen(arrayOfNormalAndBoldText.length, boldOpen);

startX = startXCached;

startY += lineSpacing;

}

});

doc.save(`boldAndNormal-multiline.pdf`);

});

const isBoldOpen = (arrayLength, valueBefore = false) => {

const isEven = arrayLength % 2 === 0;

const result = valueBefore !== isEven;

return result;

}

// ><><><><><><><<><><<><

// MULTILINE EVENT 2

// ><><><><><><><<><><<><

document.getElementById("printMultiline2").addEventListener("click", function(){

let startX = 12;

let startY = 20;

const doc = new jsPDF("p", "pt");

doc.setFont("arial")

.setFontSize(fontSize)

.setFontStyle("normal");

let inputValue = document.getElementById("multiline2").value;

const endX = 360;

// red marks to make textwidth visible

doc.setDrawColor('#ff0000');

doc.setLineWidth(1);

doc.line(startX, startY - 10, startX, startY + 200);

doc.line(endX, startY - 10, endX, startY + 200);

const regex = /(\*{2})+/g; // all "**" words

const textWithoutBoldMarks = inputValue.replace(regex, '');

let splitTextWithoutBoldMarks = doc.splitTextToSize(

textWithoutBoldMarks,

360

);

let charsMapLength = 0;

let position = 0;

let isBold = false;

// <><>><><>><>><><><><><>>><><<><><><><>

// power algorithm to determine which char is bold

let textRows = splitTextWithoutBoldMarks.map((row, i) => {

const charsMap = row.split('');

const chars = charsMap.map((char, j) => {

position = charsMapLength + j + i;

let currentChar = inputValue.charAt(position);

if (currentChar === "*") {

const spyNextChar = inputValue.charAt(position + 1);

if (spyNextChar === "*") {

// double asterix marker exist on these position's so we toggle the bold state

isBold = !isBold;

currentChar = inputValue.charAt(position + 2);

// now we remove the markers, so loop jumps to the next real printable char

let removeMarks = inputValue.split('');

removeMarks.splice(position, 2);

inputValue = removeMarks.join('');

}

return { char: currentChar, bold: isBold };

});

charsMapLength += charsMap.length;

return { ...chars };

});

printCharacters(doc, textRows, startY, startX, fontSize, lineSpacing);

doc.save(`boldAndNormal-multiline2.pdf`);

});

const printCharacters = (doc, textObject, startY, startX, fontSize, lineSpacing) => {

const startXCached = startX;

const boldStr = 'bold';

const normalStr = 'normal';

textObject.map(row => {

Object.entries(row).map(([key, value]) => {

doc.setFontType(value.bold ? boldStr : normalStr);

doc.text(value.char, startX, startY);

startX = startX + doc.getStringUnitWidth(value.char) * fontSize;

});

startX = startXCached;

startY += lineSpacing;

});

};

</script>

Related posts:

You Might Also Like

Node.js Program to List All Files Present inside a Directory Using fs() Module & Promises in Javascript

Node.js Express Youtube Data API Project to Search Youtube Video Info in Browser Using Javascript

Build a (Tween.js + EaselJS) Multiplayer RPG Street Fighter Sprite Game in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

Leave a Reply Cancel reply