zoukankan      html  css  js  c++  java
  • 根据图片的URL生成PDF保存到本地(前台js)

    //需要引用html2canvas.js和jspdf.js

    SavePDF:function(e){
    var that = this;
    $.post("/Biz/DailyExpenseApply/GetpictureToPDF?expenseApplyId=" + this.expenseApply.ExpenseApplyID,function(res){
    _.each(res,function(m){
    getBase64(m.FileUrl,(dataURL)=>{
    debugger
    // 三个参数,第一个方向,第二个单位,第三个尺寸格式
    var doc = new jsPDF('landscape','pt',[205, 115])

    // 将图片转化为dataUrl
    var imageData = dataURL;

    doc.addImage(imageData, 'PNG', 0, 0, 205, 115);
    doc.save(m.DOCNAME+'.pdf');
    //var base64str = doc.output("datauristring");

    });

    })
    })
    },

    function getBase64(url,callback){//获取图片url的地址转换成base64
    //通过构造函数来创建的 img 实例,在赋予 src 值后就会立刻下载图片,相比 createElement() 创建 <img> 省去了 append(),也就避免了文档冗余和污染
    var Img = new Image(),
    dataURL='';
    Img.src=url;
    Img.onload=function(){ //要先确保图片完整获取到,这是个异步事件
    var canvas = document.createElement("canvas"), //创建canvas元素
    width=Img.width, //确保canvas的尺寸和图片一样
    height=Img.height;
    canvas.width=width;
    canvas.height=height;
    canvas.getContext("2d").drawImage(Img,0,0,width,height); //将图片绘制到canvas中
    debugger
    dataURL=canvas.toDataURL('image/jpeg'); //转换图片为dataURL
    callback?callback(dataURL):null; //调用回调函数
    };
    }

  • 相关阅读:
    JS精度问题(0.1+0.2 = 0.3吗?)
    力导向算法的研究与改进
    React Hooks的memo和useCallback
    React Hooks vs Vue Composition Api
    docker常用命令
    win10一台电脑上配置多个git账户
    eslint+prettier 统一代码风格
    c#中关于值类型,引用类型在栈,堆栈的分配
    js里的__proto__和prototype
    golang之冒泡排序
  • 原文地址:https://www.cnblogs.com/jiangcm/p/8657781.html
Copyright © 2011-2022 走看看