zoukankan      html  css  js  c++  java
  • Javascript的一个生产PDF的库: unicode和中文问题的解决

    Javascript的一个生产PDF的库: unicode和中文问题的解决
    基于canvas和jspdf库, 实现用javascript的支持中文pdf生成实用工具.
    参考:
    http://javascript.ruanyifeng.com/htmlapi/canvas.html


    1. 使用canvas将中文写入canvas中,再将canvas转换成图片,从而解决中文问题。

    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    
    <canvas id="myCanvas" width="200" height="200">
    </canvas>
    
    <div id="myDiv">
    </div>
    
    <script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    if (canvas.getContext) {
    var ctx = canvas.getContext("2d");
    // 设置字体
    ctx.font = "Bold 20px Arial";
    // 设置对齐方式
    ctx.textAlign = "left";
    // 设置填充颜色
    ctx.fillStyle = "#008600";
    // 设置字体内容,以及在画布上的位置
    ctx.fillText("好啊!", 10, 50);
    // 绘制空心字
    ctx.strokeText("好的啊!", 10, 100);
    
    // save to png
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    
    // create 'img' element in memory
    var nodeImage = document.createElement("img");
    nodeImage.src = image.src;
    
    // append element to html
    var nodeDiv = document.getElementById("myDiv");
    nodeDiv.appendChild(nodeImage);
    
    };
    
    </script>
    </body>
    
    </html>

    2. 使用jspdf 的图片嵌入功能, 将中文图片嵌入到pdf中, 实现前端生成中文pdf.

    http://parall.ax/products/jspdf

  • 相关阅读:
    0593. Valid Square (M)
    0832. Flipping an Image (E)
    1026. Maximum Difference Between Node and Ancestor (M)
    0563. Binary Tree Tilt (E)
    0445. Add Two Numbers II (M)
    1283. Find the Smallest Divisor Given a Threshold (M)
    C Primer Plus note9
    C Primer Plus note8
    C Primer Plus note7
    C Primer Plus note6
  • 原文地址:https://www.cnblogs.com/ToDoToTry/p/4590791.html
Copyright © 2011-2022 走看看