js实现html下载到本地并生成pdf文件

1.前段时间需要实现一个页面下载到本地并生成pdf格式的文件的需求。




 
 


html转pdf文件
下载










这就完成了html转pdf文件的需求，

当然，这时候页面中有一个图片文件是服务器返回的地址：https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg//类似这样的地址格式

这时jsPDF实现渲染的时候就会找不到这个图片的资源文件。

于是就有了这个方法将服务端返回的图片转成base64格式的文件

var imgSrc = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg";

   function getBase64(img){//传入图片路径，返回base64
   function getBase64Image(img,width,height) {//width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小
    var canvas = document.createElement("canvas");
    canvas.width = width ? width : img.width;
    canvas.height = height ? height : img.height;
 
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    var dataURL = canvas.toDataURL();
    return dataURL;
   }
   var image = new Image();
   image.crossOrigin = '';
   image.src = img;
   var deferred=$.Deferred();
   if(img){
    image.onload =function (){
     deferred.resolve(getBase64Image(image));//将base64传给done上传处理
    }
    return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']
   }
   }
 //转base64调用的方法
   getBase64(imgSrc)
    .then(function(base64){
    $("#test").attr("src",base64)
     console.log(base64);
    },function(err){
     console.log(err);
    });



这样就完成了，当然当html转成pdf文件的时候，由于文件内容过多，生成第二页文件的时候，暂时不能控制转成pdf之后的样式。