vue导出pdf，分页被截断 ，图片不显示的问题，已解决。

vue导出pdf，分页被截断 ，图片不显示的问题，已解决。

直接上步骤，亲测有效。

• 第一步 安装所需要的用到的插件

  • 1 . 将页面HTML 转换成图片 npm i html2canvas -S

  • 2 . 将图片生成pdf npm i jspdf -S

• 第二步创建pdf.js文件

import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
function printOut(DomName) {
console.log("正在帮您导出......")
//title，随意设置，也可以提出来做参数，传入进来，自己发挥
var title = '测试啊';
var that = this;
var shareContent = DomName; //需要截图的包裹的（原生的）DOM 对象
//打印看有没有获取到dom
console.log(shareContent)
var width = shareContent.offsetWidth; //获取dom 宽度
var height = shareContent.offsetHeight; //获取dom 高度
var canvas = document.createElement("canvas"); //创建一个canvas节点
var scale = 2; //定义任意放大倍数 支持小数
canvas.width = width * scale; //定义canvas 宽度 * 缩放，在此我是把canvas放大了2倍
canvas.height = height * scale; //定义canvas高度 *缩放
canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
html2Canvas(DomName, {
//允许跨域图片的加载
useCORS: true,
}).then(function (canvas) {
var context = canvas.getContext("2d");
// 【重要】关闭抗锯齿
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
var imgData = canvas.toDataURL('image/', 1.0); //转化成base64格式,可上网了解此格式
var img = new Image();
img.src = imgData;
img.onload = function () {
img.width = img.width / 2; //因为在上面放大了2倍，生成image之后要/2
img.height = img.height / 2;
img.style.transform = "scale(0.5)";
if (this.width > this.height) {
//此可以根据打印的大小进行自动调节
var doc = new JsPDF("l", "mm", [
this.width * 0.555,
this.height * 0.555
]);
} else {
var doc = new JsPDF("p", "mm", [
this.width * 0.555,
this.height * 0.555
]);
}
doc.addImage(
imgData,
"jpeg",
10,
0,
this.width * 0.505,
this.height * 0.545
);
doc.save(title + "-文件.pdf");
console.log("倒数3秒导出啦")
};
});
}
//导出方法
export {
printOut
}

• 第三步在需要用到导出pdf的页面引入方法

tu1.jpg.png

• 第四步先解决图片跨域的问题

  • 页面html

    tu2.jpg.png

  • 图片链接转base64的js

    data() {
    return {
    msg: "Welcome to Your Vue.js App",
    url:'放你图片的链接地址'
    };
    },
    methods: {
    getBase64Image (url, ref) {
    var that = this
    var image = new Image()
    image.src = url + '?v=' + Math.random() // 处理缓存
    image.crossOrigin = '*' // 支持跨域图片
    image.onload = function () {
    var base64 = that.drawBase64Image(image)
    //转换后的赋值回去，这个是通过获取节点赋值的方式
    that.refs.targetDom;
    //调用引入的js方法调取打印
    printOut(targetDom)
    }
    ​
    },
    created() {
    let url=this.url
    //调用图片转换base64的方法
    this.getBase64Image(url, 'urlTest')
    }

  到这里就完成了。