访问次数
我的另一个总结性博客: todototry 大米粒

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

 

posted @   fandyst  阅读(1147)  评论(0编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架
历史上的今天:
2009-06-20 Struts 源码分析笔记1(尚无内容-请跳过,省得浪费时间)
点击右上角即可分享
微信分享提示