The last article said ctx.service.pdf.index.generate(data) method is the core business method. Call service/pdf/ in root directory in egg index.js The generate method under. Let's talk about eggjs. Official website address: https://eggjs.org/zh-cn/basic....
Get to know eggjs
Egg.js Born for enterprise framework and application, we should all know Koa, and egg chose Koa as its basic framework, based on its model, further enhanced it, so it inherited the onion model of Koa.
Egg.js Characteristics of
- Provide eggbased Customize the upper framework Ability of
- Highly scalable Plug in mechanism
- built-in Multi process management
- be based on Koa Development, excellent performance
- Stable framework and high test coverage
- Progressive development
Students who want to know more can go to the official website to study.
Puppeter generates img
Puppeter was released by the chrome development team in 2017 Node.js Package to simulate the operation of Chrome browser.
Because of the company's business needs, I began to know this powerful guy early. But I have to say that it's easy to use and put it back to use. There are many pits, too. I'll talk about some pits that Popper encountered later. In the process of project investigation, it was found that there would be some holes in generating pdf directly by puppeter, and then it was decided to generate img by puppeter and convert it to pdf by canvas.
Let's go to the main topic:
Here is the use of puppeter to generate img
async htmlToImg(url) { return new Promise(async (resolve, reject) => { try { let startTime, endPrintTime startTime = new Date() // Open the built-in Chrome browser const brower = await puppeteer.launch() // Open a tab page of browser const page = await brower.newPage() // Set window parameters await page.setViewport({ width: tools.interceptWidth, height: tools.interceptHeight, deviceScaleFactor: tools.deviceScaleFactor }) // Configure the browser ua, I have configured the mobile mode here await page.setUserAgent( 'Mozilla/5.0 (iPhone; CPU iPhone OS 12_1_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/16C101 ios/4.10.0' ) browerpage = page // Let browser jump to corresponding page await browerpage.goto(url, { waitUntil: 'networkidle0' }) const more = await this.moreThanOnePage(browerpage) // Judge whether the home page is less than tools.interceptHeight let lastScrllTop = more === true ? -tools.interceptHeight : -more let obj = { scrollTop: 0 } let i = 0 // Instantiate an imgToPdf and judge more to initialize the initial height of the imgToPdf canvas // Here is a process of converting img to pdf by canvas. imgToPdf will be described separately below let imgToPdfHeight = more === true ? tools.interceptHeight : more let toPdf = new imgToPdf(imgToPdfHeight * tools.deviceScaleFactor) while(obj.scrollTop > lastScrllTop) { let funCanScroll = true // Height of last page let imgToPdfGetHeight = tools.interceptHeight * tools.deviceScaleFactor //Last less than tools.interceptHeight situation if (obj.scrollTop - lastScrllTop < tools.interceptHeight) { funCanScroll = false // Because deviceScaleFactor is set to 2, the actual height is multiplied by 2 imgToPdfGetHeight = (obj.scrollTop - lastScrllTop) * tools.deviceScaleFactor await browerpage.setViewport({ width: tools.interceptWidth, height: imgToPdfGetHeight / tools.deviceScaleFactor, deviceScaleFactor: tools.deviceScaleFactor }) await this.lastScroll(browerpage) } lastScrllTop = obj.scrollTop // The final buffer stream is generated let buffer = await browerpage.screenshot({ type: 'png' }) // Put the generated buffer stream image on the canvas generated by canvas await toPdf.set(buffer, imgToPdfGetHeight, i) i++ obj = await this.scroll(browerpage) if (!funCanScroll) { break } } // Close built-in browser await brower.close() // Exporting the final pdf is toPdf.get(), later resolve({ buffer: toPdf.get(), ext: 'pdf' }) } catch(e) { reject(e) } }) }
Here is the imgToPdf class. First, generate a this.canvas Canvas.
By setting the set method, the buffer stream of img generated by puppeter is pasted on the canvas, and then the buffer stream is immediately clear, so as to reduce the memory.
Finally, get the final generated pdf through the get method in the above file.
const { createCanvas, loadImage } = require('canvas') const { tools } = require('../../tools/index') class imgToPdf { constructor(height) { // Create canvas size this.canvas = createCanvas(tools.interceptWidth * tools.deviceScaleFactor, height, 'pdf') this.ctx = this.canvas.getContext('2d') } async set(bufferImage, height, index) { return new Promise(async (resolve, reject) => { try { if (index) { this.ctx.addPage(tools.interceptWidth * tools.deviceScaleFactor, height) } await loadImage(bufferImage).then((image) => { this.ctx.drawImage(image, 0, 0) }) resolve(true) } catch(e) { reject(e) } }) } get() { return this.canvas.toBuffer() } } exports.imgToPdf = imgToPdf
Here is the general process of generating img by puppeter, and converting img to pdf by canvas.
For more details about puppeter, please refer to: https://zhaoqize.github.io/pu...
Please check the detailed code in my github.