svg 转pdf

　今天介绍如何将svg转成pdf，这里介绍两种方法。

　第一种方法：

　这种方法需要使用jspdf和svg2pdf包，分别使用的版本是2.5.1和2.2.0

downloadSvg2Pdf(imageBase64, svg, outFileName = 'newplot.pdf') {

 　　// 如果仅有imageBase64，无svg（svg这里的意思是<svg></svg>），则需要先执行下面步骤，其中
　　 //svg1 = atob(imageBase64.replace(/data:image\/svg\+xml;base64,/, ''));
　　 //svg = parseToDomObject(svg);

     const img = new Image(); // 创建图片容器

     img.src = imageBase64; //imageBase64 为svg+xml的Base64 文件流

     img.onload = async () => {

         const size = [img.width, img.height]; // 获取图片尺寸防止不完整

         // const pdf = new jsPDF('portrait', 'cm', [21.0, 29.6]);

         // const pdf = new jsPDF('l', 'pt', 'a4');

         const pdf = new jsPDF('l', 'pt', size);

         await pdf.svg(svg);

         const uri = pdf.output('datauristring');

         const link = document.createElement('a');

         link.download = outFileName;

         link.href = uri;

         link.click();

     }

    data:image/svg+xml;base64是svg图片的内容，使用atob()解码成<svg></svg>。但是这一步获取的是string类型，所以需要使用parseToDomObject转换格式。

　 其中，parseToDomObject()方法为：

parseToDomObject(svgString) {
  const div = document.createElement('div');
  if (typeof svgString === 'string') {
    div.innerHTML = svgString;
  }
  return div.firstElementChild;
}

　方法二：

　这种方法使用了，pdfkit，blob-stream 和svg-to-pdfkit这三个包，使用此方法的时候，我用const PDFDocument = require('pdfkit')会出现错误，导致错误的原因主要是pdfkit里面有个fontkit包引起的，所以我换了另一种方式，直接在svg-to-pdfkit的代码库中，下载了pdfkit.js文件，因此解决了出现问题。下面是转pdf文件的代码

downloadSvg2PdfKit(imageBase64, outFileName='newplot.pdf') {
    const mainsvg = atob(imageBase64.replace(/data:image\/svg\+xml;base64,/, ''));
    const img = new Image(); // 创建图片容器
    img.src = imageBase64; //imageBase64 为svg+xml的Base64文件流
    img.onload = () => {
        const size = [img.width, img.height];
        const pdf = new PDFDocument({compress: false, size: size});
        SVGtoPDF(pdf, mainsvg, 0, 0);
        const blob_stream = pdf.pipe(BlobStream());
        stream.on('finish', () => {
            const blob = blob_stream.toBlob('application/pdf');
            const a = document.createElement('a');
            a.href = URL.createObjectURL(blob);
            a.download = outFileName;
            a.click();
        });
        pdf.end();
    };
}

　最后，如果有小伙伴们知道如何解决在vue中import pdfkit而引起的上述问题，希望可以给个解决方法。