vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue html2canvas和jspdf 生成pdf jspdf中文乱码问题

vue基于html2canvas和jspdf 生成pdf 、解决jspdf中文乱码问题的方法详解

作者:无知的小菜鸡

这篇文章主要介绍了vue基于html2canvas和jspdf 生成pdf 、解决jspdf中文乱码问题的方法,结合实例形式详细描述了中文乱码问题的原因、解决方法与相关注意事项,需要的朋友可以参考下

html2canvas

html2canvas文档

备注:以下内容都是基于官方文档

简介

该脚本允许您直接在用户浏览器上对网页或其部分进行“截图”。屏幕截图基于 DOM,因此可能不是 100% 准确到真实表示,因为它不会制作实际的屏幕截图,而是根据页面上可用的信息构建屏幕截图。

安装及使用

npm install html2canvas
import html2canvas from 'html2canvas';
html2canvas(el,options).then(function(canvas) {
    document.body.appendChild(canvas);
});
el 是要生成canvas的dom对象,
options是配置项,常用的配置项有:backgroundColor(背景色,默认白色)、
width(宽度)、height(高度)、useCORS(是否尝试使用 CORS 从服务器加载图像)、
canvas(canvas对象用作绘图基础的现有元素)

参考文章:html2canvas使用笔记

示例

下面的例子基于Vue

<template>
    <div>
        <div ref="a">
            <img src="./image/aa.webp" />
            <p>一张唐老鸭图片</p>
        </div>
        <el-button type="primary" @click="createCanvas">html转canvas</el-button>
        <div ref="b">
            <p>这里放生成的canvas</p>
        </div>
    </div>
</template>
<script>
import html2canvas from 'html2canvas';
export default {
    methods: {
        createCanvas() {
            // dom元素
            let dom = this.$refs.a;
            // 宽高
            let width = dom.offsetWidth;
            let height = dom.offsetHeight;
            // 生成一个canvas对象
            let canvas = document.createElement('canvas');
            // 设置canvas的宽高
            canvas.width = width * 2;
            canvas.height = height * 2;
            // 生成页面模糊时,可以放大一定倍数,通过调整canvas的宽高使其清晰度增加
            const context = canvas.getContext('2d');
            context.scale(1.5, 1.5);
            // 配置项
            let options = {
                backgroundColor: '#ffffff',
                canvas: canvas,
                useCORS: true
            };
            // 容器
            let container = this.$refs.b;
            // 生成canvas并插入到容器里
            html2canvas(dom,options).then(canvas => {
                container.appendChild(canvas);
            });
        }
    }
};
</script>
<style scoped lang="scss">
</style>

效果图
在这里插入图片描述

jspdf

JSPDF API官方文档

基础语法

new jsPDF(orientation, unit, format) → {jsPDF}

orientation:方向,默认p(竖直方向),可选l(横向)

unit:单位,指定坐标时要使用的测量单位。“pt”(点)、“mm”(默认)、“cm”、“in”之一

format :应该是纸张格式,默认a4

常用方法

文本

text(text, x, y, flags) → {jsPDF}
text:文本内容
x,y  文本相对于页面左上角的偏移量
flags:具体是干啥的不填清楚,可以不用填
// 生成文本
createText() {
    let doc = new JsPdf();
    doc.text('aaa',100,100);
    // 保存成pdf文件
    doc.save('a.pdf');
}

下面是生成的pdf文件
在这里插入图片描述
关于中文乱码问题

查了一下官网,官网内容如下(官网是英文的,用谷歌翻译,翻译了一下)

jspdf git地址
在这里插入图片描述
官网里提供的那个地址不太好使,我这里把代码下到了本地。找到下面的这个html文件
在这里插入图片描述
点击打开,可以看到下面的网站
在这里插入图片描述
上传一个ttf的字体文件,会生成一个js文件。然后将文件引入到页面里

import './hyjt-normal';
// 添加并设置字体
console.log(doc.getFontList());
doc.setFont('hyjt');

doc.getFontList() 用于获取当前支持那些字体,doc.setFont(); 设置字体,值一定要与你上面填的名一致,打开这个js文件可以看到:
在这里插入图片描述
示例:

// 生成文本
createText() {
    let doc = new JsPdf();
    // 添加并设置字体
    console.log(doc.getFontList());
    doc.setFont('hyjt');
    doc.text('哈哈哈',100,100);
    // 保存成pdf文件
    doc.save('a.pdf');
}

在这里插入图片描述
文本颜色

setTextColor(r, g, b)
// rgb 颜色值(0~255)

添加新页面和设置指针所在页数

//添加新页面
addPage()
//设置当前焦点在第几页
setPage(number)

示例:

// 生成文本
createText() {
    let doc = new JsPdf();
    doc.setFont('hyjt');
    doc.addPage();
    doc.text('I am on page 2', 10, 10);
    doc.setPage(1);
    doc.text('I am on page 1', 10, 10);
    // 保存成pdf文件
    doc.save('a.pdf');
}

说一下流程:默认内容会在第一页,执行addPage()后会生成新的一页,焦点跳到第二页,I am on page 2 会在第二页里生成;执行setPage(1) ,焦点跳转到第一页,I am on page 1会在第一页里生成

设置字体大小

setFontSize(number)

保存pdf

save(filename)

获取可用字体列表

getFontList () 

生成图片

addImage(imageData,format,x,y,width,height)
imageData:图片的data URL
format:图片的格式,比如png
x,y:距离页面左上角的偏移
width,height:图片的宽高

示例:

// 生成图片
createImage() {
    // 生成pdf
    let doc = new JsPdf();
    doc.addImage(this.canvasImage,'jpeg',100,20,200,200);
    doc.save('b.pdf');
}

主要是要获取图片的data URL,可以借助canvas的toDataURL方法,可以借助一下上面的html2canvas

// 生成canvas并插入到容器里
 html2canvas(dom,options).then(canvas => {
     container.appendChild(canvas);
     this.canvasImage = canvas.toDataURL('image/jpeg');
 });

在这里插入图片描述

您可能感兴趣的文章:
阅读全文