Vue3 export pdf scheme
1. Introduce two dependencies
npm i html2canvas npm i jspdf
2. Create a new file in the utils folder
// The page is exported to pdf formatimport html2Canvas from 'html2canvas';
import jsPDF from 'jspdf';
const htmlToPdf = {
getPdf(title, loading) {
// loading = true;
(loading);
html2Canvas(('#pdfDom'), {
allowTaint: false,
taintTest: false,
logging: false,
useCORS: true,
dpi: * 4, //Quick the resolution to a specific DPI four times scale: 4, //Increase resolution in proportion }).then((canvas) => {
var pdf = new jsPDF('p', 'mm', 'a4'); //A4 paper, vertical var ctx = ('2d'),
a4w = 190,
a4h = 272, //A4 size, 210mm x 297mm, 10mm margins are retained on all sides, and the display area is 190x277 imgHeight = ((a4h * ) / a4w), //Convert the pixel height of a page of images according to the A4 display ratio renderedHeight = 0;
while (renderedHeight < ) {
var page = ('canvas');
= ;
= (imgHeight, - renderedHeight); //The content may be less than one page //Cut the specified area with getImageData and draw it into the canvas object created earlier page
.getContext('2d')
.putImageData(
(
0,
renderedHeight,
,
(imgHeight, - renderedHeight),
),
0,
0,
);
(
('image/jpeg', 1.0),
'JPEG',
10,
10,
a4w,
(a4h, (a4w * ) / ),
); //Add image to page, retain 10mm margin renderedHeight += imgHeight;
if (renderedHeight < ) {
(); //If there is any content behind it, add an empty page }
// delete page;
}
//Save the file (title + '.pdf');
// loading = false;
(loading);
});
},
};
export default htmlToPdf;Extensions:You can also pass multiple different container ids
// The page is exported to pdf formatimport html2Canvas from 'html2canvas';
import jsPDF from 'jspdf';
const htmlToPdf = {
getPdf(title, id) {
html2Canvas(
(id),
{
allowTaint: false,
taintTest: false,
logging: false,
useCORS: true,
dpi: * 4, //Quick the resolution to a specific DPI four times scale: 4, //Increase resolution in proportion }
).then((canvas) => {
var pdf = new jsPDF('p', 'mm', 'a4'); //A4 paper, vertical var ctx = ('2d'),
a4w = 190,
a4h = 272, //A4 size, 210mm x 297mm, 10mm margins are retained on all sides, and the display area is 190x277 imgHeight = ((a4h * ) / a4w), //Convert the pixel height of a page of images according to the A4 display ratio renderedHeight = 0;
while (renderedHeight < ) {
var page = ('canvas');
= ;
= (imgHeight, - renderedHeight); //The content may be less than one page //Cut the specified area with getImageData and draw it into the canvas object created earlier page
.getContext('2d')
.putImageData(
(
0,
renderedHeight,
,
(imgHeight, - renderedHeight),
),
0,
0,
);
(
('image/jpeg', 1.0),
'JPEG',
10,
10,
a4w,
(a4h, (a4w * ) / ),
); //Add image to page, retain 10mm margin renderedHeight += imgHeight;
if (renderedHeight < ) {
(); //If there is any content behind it, add an empty page }
// delete page;
}
});
},
};
export default htmlToPdf;3. Come to the page where you need to convert vue to pdf
...
<!-- Button -->
<el-button size="mini" type="primary" @click="pdfFunc" :loading="loading">
Convert topdf
</el-button>
...
<div >
<!-- 此处是希望Convert topdfPart of content，Use a largedivPack the box -->
</div>
<script setup>
// Importimport htmlToPdf from '../utils/htmlToPdf';
// Can be defined in methodsconst pdfFunc = () => {
= true;
// Call the htmlToPdf tool function ('file name');
// Timer simulates the time of loading the button animation setTimeout(() => {
= false;
('Print successfully!');
}, 1000);
}
</script>methods:
pdfFunc() {
// Call the htmlToPdf tool function ('file name');
// Timer simulates the time of loading the button animation setTimeout(() => {
}, 1000);
},Extensions:Multiple containers have different ids
// Container pdfFunc() {
= true; // Animation loading event // Call the htmlToPdf tool function ('Small and Medium Enterprises',"#pdfCompany");
// Timer simulates the time of loading the button animation setTimeout(() => {
= false;
}, 1000);
}jsPdf
Introduce the usage of pure jspdf, export an image list into a pdf file, and calculate the position in pdf based on the image width and height
jsPDF is an HTML5-based client solution for generating PDF documents for a variety of purposes.
Official website address: /MrRio/jsPDF/master/docs/
1. Installation:npm install jspdf
2. Introduce:import jsPDF from “jspdf”
3. Use:
let pdf = new jsPDF('p', 'pt', [pdfX, pdfY]);The first parameter: l: horizontal p: vertical
The second parameter: unit of measurement ("pt", "mm", "cm", "m", "in" or "px")
The third parameter: can be in the following format, default is "a4"
- a0 - a10
- b0 - b10
- c0 - c10
- dl
- letter
- government-letter
- legal
- junior-legal
- ledger
- tabloid
- credit-card
The default is "a4". If you want to use your own format, just pass the size as an array of numbers, for example [595.28, 841.89];
*Delete a page pdf: *
let targetPage = (); //Get the total page(targetPage); // Delete the target page
*Save PDF document: *
(`test.pdf`);
Example：
1. Export a full page of pdf file and dynamically set the position of pdf according to the image height.*Assemble and export methods according to your own data format*
/**
* Export a PDF page The page width or height in the PDF cannot exceed 14400 userUnits. jsPDF limits width/height to 14400
* @param pageList
*/
const exportPdf = (pageList: any) => {
let [imgX, imgY] = [595.28, 841.89]; // a4 paper size [595.28, 841.89]; var pdfX = imgX
var pdfY = getLength(pageList);
let pdf = new jsPDF('p', 'pt', [pdfX, pdfY]); //l: Horizontal p: Vertical let isAddpage = 0;
for (let [index, item] of ()) {
for (let j = 0; j < ; j++) {
const image = [j];
let imgHeight = imgX / ( / );
(, 'JPEG', 0, isAddpage, imgX, imgHeight);
isAddpage += imgHeight;
}
}
(`All textbooks_${getTime()}.pdf`);
}2. Pagination export
const exportPdf = (pageList: any) => {
let [imgX, imgY] = [595.28, 841.89];
let pdf = new jsPDF('p', 'pt', 'a4');
for (let [index, item] of ()) {
for (let j = 0; j < ; j++) {
const image = [j];
let imgHeight = imgX / ( / ); // Calculate the height based on the width (, 'JPEG', 0, 0, imgX, imgHeight);
();
}
}
let targetPage = ();
(targetPage); // Delete the last page (`test.pdf`);
}Summarize
This is the end of this article about Vue3 exporting pdf files. For more related Vue3 exporting pdf content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!