canvas 转成PDF

1,554 阅读1分钟

canvas 转成PDF

引入:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.0/polyfills.umd.js"></script>
import { jsPDF } from "jspdf";
https://unpkg.com/
https://www.jsdelivr.com/
https://www.bootcdn.cn/
 const base64 = canvas.toImage();
 let jspdf = new jsPDF();
 jspdf.addImage(imgData, 'PNG', 15, 40, 180, 160);
 jspdf.save('imgData.pdf');

eg:

function convert(){
    const doc = new jsPDF();
    const imgData = 'data:image/jpeg;base64,'+ Base64.encode('Koala.jpeg');
    console.log(imgData);
    doc.setFontSize(40);
    doc.text(30, 20, 'Hello world!');
    doc.output('datauri');
    doc.addImage(imgData, 'JPEG', 15, 40, 180, 160);

}
const img = new Image()
img.src = 'assets/sample.png'
pdf.addImage(img, 'png', 10, 78, 12, 15)

request url

function getImgFromUrl(logo_url, callback) {
    var img = new Image();
    img.src = logo_url;
    img.onload = function () {
        callback(img);
    };
} 
function generatePDF(img){
    var options = {orientation: 'p', unit: 'mm', format: custom};
    var doc = new jsPDF(options);
    doc.addImage(img, 'JPEG', 0, 0, 100, 50);}
var logo_url = "/images/logo.jpg";
getImgFromUrl(logo_url, function (img) {
    generatePDF(img);
});

more:

https://www.npmjs.com/package/jspdf