1. Preface
I tried to convert pictures into PDFs in a centralized way.
(1) The ultimate advantageous one is to use jspdf to convert the image into pdf, which supports JPG/JPEG/PNG/BMP/TIF/TIFF image format conversion. For details, please refer to another article in my article:Use jsPDF to convert pictures into pdf
(2) Use the print-js plugin and go and have a look
(3) pdfMake picture to pdf, supports JPG/JPEG/PNG picture format conversion, go and have a look
(4) html2canvas, the picture transferred is blurry and needs to be processed. I didn't process it, go and have a look
-js picture to pdf
npm install print-js dependency
:
import print from 'print-js'
use:
printJS({
// blob link array printable: ['blob:http//.....'],
// Print type is currently the picture style. You can modify it according to the above URL type: 'pdf',
// QR code style can be modified by yourself imageStyle: 'margin:0px; padding:0px; width:40%; height:40%; display: block; margin: 0 auto; padding-top:12%'
// You can also set the following parameters. Inherit all css styles. HTML that has not tried image has a good effect. // targetStyles:['*']
})Picture to pdf
Install pdfMake dependencies
async convertToPDF(blob, id) {
let this_ = this
let base64Data = await (blob);
const docDefinition = {
content: [
{ image: base64Data, fit: [190, 277], alignment: 'center' } //width: 400,
]
}
const pdfDocGenerator = (docDefinition)
(pdfBlob => {
("This is the blob format of pdf -----"pdfBlob);
// You can use blobs here, such as converting them to blob URL let url = (new Blob([pdfBlob], { type: 'application/pdf' }))
});
},
//blob to base64readFile(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
= function () {
const contents = ;
resolve(contents);
};
= function (event) {
reject();
};
(file);
});
},Some other conversion methods
//ArrayBuffer is converted to Base64arrayBufferToBase64(arrayBuffer) {
const uint8Array = new Uint8Array(arrayBuffer);
let binaryString = '';
for (let i = 0; i < ; i++) {
binaryString += (uint8Array[i]);
}
return btoa(binaryString);
},4.html2canvas picture to pdf
Installation dependencies
<div v-for="(item, index) in list" :key="index">
<img : :src="" alt="" />
</div>async imgToPdf(imgUrl, id) {
// Render the image as Canvas //Because the img tag is to display the picture in a loop, determine which img tag it is based on the id const canvas = await html2canvas(('imageContainer'+id))
// Get the DataURL of Canvas const imageURL = ('image/png')
//const imageURL = (imgUrl)
// Create PDF instance and set paper size const pdf = new jsPDF('p', 'px', 'a4')
// Calculate the width and height of the image in PDF const pdfWidth = ()
const pdfHeight = ( * pdfWidth) /
// Add image to PDF (imageURL, 'JPEG', 0, 0, pdfWidth, pdfHeight)
()
const blob = new Blob([pdf], { type: 'application/PDF' })
("The generated pdf blob file ---",blob)
},This is the article about the example code of Vue to implement image to pdf. For more related content on vue to pdf, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!