vue 页面转图片并下载pdf

html2canvas 下载
JsPDF 下载

import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'

// 使用  this.getPdf('id',文件名)
export default {
    install (Vue, options) {
        Vue.prototype.getPdf = function (ids, title) {
            // let dome = document.getElementById(ids).clientWidth
            html2Canvas(document.querySelector('#' + ids), {
                //allowTaint: true,
                backgroundColor: "white",
                useCORS: true, //支持图片跨域
                scale: 2, //设置放大的倍数
                //x: (window.innerWidth - dome) / 2,
                y: window.pageYOffset + document.getElementById("dome").getBoundingClientRect().top
            }).then(function (canvas) {
                // 得到canvas画布的单位是px 像素单位
                var contentWidth = canvas.width
                var contentHeight = canvas.height
                // 将canvas转为base64图片

                // 设置pdf的尺寸，pdf要使用pt单位 已知 1pt/1px = 0.75   pt = (px/scale)* 0.75
                // 2为上面的scale 缩放了2倍
                var pdfX = (contentWidth + 10) / 2 * 0.75
                var pdfY = (contentHeight + 50) / 2 * 0.75 || 200 // 500为底部留白
                // 设置内容图片的尺寸，img是pt单位 
                var imgX = pdfX;
                var imgY = (contentHeight / 2 * 0.75); //内容图片这里不需要留白的距离

                var pageData = canvas.toDataURL('image/jpeg', 1.0)
                let type = "p" //纵向
                if (pdfX > pdfY) {
                    type = "1" //横向
                }
                // 初始化jspdf 第一个参数方向：默认''时为纵向，第二个参数设置pdf内容图片使用的长度单位为pt，第三个参数为PDF的大小，单位是pt
                var PDF = new JsPDF(type, 'pt', [pdfX, pdfY])

                // 将内容图片添加到pdf中，因为内容宽高和pdf宽高一样，就只需要一页，位置就是 0,0
                PDF.addImage(pageData, 'jpeg', 0, 0, imgX, imgY)
                PDF.save('download.pdf')
            })
        }
    }
}

注意：转canvas时 都是已window坐标为准 如：（x，y偏移）不是需要打印的元素 转pdf需要注意宽度大于高度时需要写入横向l 小于时纵向p