html页面导出pdf截断问题,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')

}

到这里就完成了。