zoukankan      html  css  js  c++  java
  • JSPDF 中文乱码

    引用自 https://www.hangge.com/blog/cache/detail_2207.html

    1,问题描述

    (1)如果添加的文字中包含有中文(汉字),我们会发现生成的 pdf 文件时,里面中文部分就会变成乱码:
    原文:JS - PDF文件生成库jsPDF使用详解3(解决中文乱码问题)
    (2)这是由于 jsPDF 默认是不支持中文的。我们可以通过手动引入中文字体,解决了导出 pdf 后中文字体显示乱码的问题。
     

    2,操作步骤

    (1)首先访问下方地址,将 jsPDF-CustomFonts-support 这个 jsPDF 的字体扩展库以及字体下载到本地,并放到项目文件夹中:
     
    (2)接着将 jspdf.customfonts.min.js 和 default_vfs.js 这两个 js 引入进来。
    1
    2
    <script src="jspdf.customfonts.min.js"></script>
    <script src="default_vfs.js"></script>
     
    (3)最后在代码中将中文字体添加并设置使用即可。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script src="jspdf.min.js" charset="utf-8"></script>
        <script src="jspdf.customfonts.min.js"></script>
        <script src="default_vfs.js"></script>
        <script type="text/javascript">
          //页面初始化
          function init() {
            var doc = new jsPDF();
            //添加并设置字体
            doc.addFont('NotoSansCJKtc-Regular.ttf''NotoSansCJKtc''normal');
            doc.setFont('NotoSansCJKtc');
            doc.text(20, 20, '欢迎访问 hangge.com');
            doc.save('Test.pdf');
          }
        </script>
      </head>
      <body onload="init()">
      </body>
    </html>


    原文出自:www.hangge.com  转载请保留原文链接:https://www.hangge.com/blog/cache/detail_2207.html

  • 相关阅读:
    HTML if条件注释解读
    Springboot整合logback日志系统
    Springboot @Valid 参数校验
    JDK1.8 版的if else
    Android获取手机定位坐标
    CentOS8安装JDK
    Vue全局配置文件
    git学习
    百度前端面试题—基础
    前端知识网络
  • 原文地址:https://www.cnblogs.com/gxivwshjj/p/12175051.html
Copyright © 2011-2022 走看看