実際の開発要件: vue プロジェクトでは、データ構造に従って echarts チャート コンポーネントが生成されます。スタイル付きチャートを生成した後、ダウンロード ボタンをクリックしてチャートを PDF ファイルとしてローカル実装アイデアにダウンロードします。 vue インターフェイスの echarts コンポーネント
、次にプラグインを使用して、生成された画像を pdf に配置し、pdf ファイルのダウンロードを実現します。フレームワークとプラグインを使用: vue、echarts
、html2canvas、dom-to-image 、jspdf
プラグインの紹介:
言うまでもなく、 vue とvue のフロントエンド フレームワークである echarts は、データに基づいてスタイル効果を備えたチャートを生成するために使用されます; html2canvas と dom-to-image は両方ともインターフェイス上の dom から画像を生成します。
html2キャンバス
主に、選択したページまたはページ全体をキャンバス イメージにレンダリングし、DOM を読み取ってこれらの要素にさまざまなスタイルを適用することにより、ユーザーのブラウザー側でページの全体または一部のイメージを直接生成できます。画像はHTMLの要素を取得してCanvasを生成することで生成できます。
安装
npm install --save html2canvas
或 yarn add html2canvas
引入
import html2canvas from 'html2canvas';
使用法：
<div class="container" id="myDom1">
测试
</div>
<style>
.container {
width:100px;
height:100px;
background:red;
color: #ffffff;
}
</style>
methods(){
getImage(){
html2canvas(document.querySelector("#myDom1")).then(canvas => {
console.logo(canvas)
document.body.appendChild(canvas);
var dataUrl = canvas.toDataURL("image/png")
});
}
}
| パラメータ名 | タイプ | デフォルト | 説明 |
|---|---|---|---|
| 汚染を許可する | ブール値 | 間違い | クロスドメインを許可する |
| バックグラウンド | 弦 | #fff | キャンバスの背景色。設定されていない場合、デフォルトは透明です。 |
| 身長 | 番号 | ヌル | キャンバスの高さの設定 |
| 手紙のレンダリング | ブール値 | 間違い | 文字間隔を設定する場合に便利です |
| ロギング | ブール値 | 間違い | 出力情報 |
| プロキシー | 弦 | 未定義 | プロキシアドレス |
| 汚染テスト | ブール値 | 真実 | レンダリング前に画像をテストするかどうか |
| タイムアウト | 番号 | 0 | 画像の読み込み遅延。デフォルトの遅延は 0 (ミリ秒単位) |
| 幅 | 番号 | ヌル | キャンバスの幅 |
| CORSを使用する | ブール値 | 間違い | 画像のクロスドメイン問題 |
dom からイメージへ
任意の DOM ノードを JavaScript で記述されたベクター (SVG) またはラスター (PNG または JPEG) イメージに変換できます。
安装
npm install dom-to-image
或 yarn add dom-to-image
引入
import domtoimage from 'dom-to-image';
或 var domtoimage = require('dom-to-image');
基本的な使い方:
<template>
<div id=""myDom>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
......
</div>
</template>
methods(){
getDomToImage(){
let dom = document.getElementById('myDom');
domtoimage.toPng(dom).then(function (dataUrl) {
var img = new Image();
img.src = dataUrl;
document.body.appendChild(img);
})
.catch(function (error) {
console.error('wrong!', error);
});
}
}
PNG BLOB を取得します。
domtoimage.toBlob(document.getElementById('myDom')).then(function (blob) {
console.log(blob)
});
jspdf
jsPDF は、JavaScript 言語を使用して PDF を生成するためのオープン ソース ライブラリです。Firefox アドオン、サーバーサイド スクリプト、またはブラウザ スクリプトで使用できます。
安装：
npm install jspdf
或 yarn add jspdf
引入
import jsPDF from "jspdf"
基本的な使い方:
let pdf = new jsPDF('p', 'pt', 'a4);
参数1：l：横向 p：纵向
参数2：单位（"pt"，"mm", "cm", "m", "in" or "px"）
参数3：格式，默认为“a4”
一般的な方法:
pdf.addPage() 在PDF文档中添加新页面，参数如下，也可以不设置，默认a4
pdf.addImage() 将图像添加到PDF中
pdf.save(`保存的PDF文件.pdf`); 保存为pdf格式的文件
要件に戻る: vue プロジェクトでは、データ構造に従って echarts チャート コンポーネントが生成されます。スタイルを使用してチャートを生成した後、ダウンロード ボタンをクリックして、チャートを PDF ファイル (ページネーション付き) としてローカルにダウンロードします。いくつかのコードは次のとおりです（アイデア）
1.html2canvasを使用する
<template>
<div id="pdfDom" ref="pdfDom">
// 此处存放界面中显示的内容区域，生成pdf的内容区域......
</div>
</template>
methods(){
let node = document.getElementById('pdfDom');
html2canvas(document.getElementById('pdfDom'), {
scale: 2
}).then(function (canvas) {
var pdfWidth = canvas.width;
var pdfHeight = canvas.height;
var pageHeight = pdfWidth / 592.28 * 841.89;
var leftHeight = pdfHeight;
var position = 0;
var imgWidth = 595.28;
var imgHeight = 595.28 / pdfWidth * pdfHeight;
var pageData = canvas.toDataURL("img/jpeg", 1.0);
var pdf = new jsPDF('', 'pt', 'a4');
// 判断打印dom高度是否需要分页，如果需要进行分页处理
if (leftHeight < pageHeight) {
pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight)
} else {
while (leftHeight > 0) {
pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
if (leftHeight > 0) {
pdf.addPage()
}
}
}
const aLink = document.createElement('a')
document.body.appendChild(aLink)
const url = URL.createObjectURL(_this.toBlob(pdf.output('datauristring')))
aLink.href = url
let date = new Date()
let year = date.getFullYear()
let month = (date.getMonth() + 1).toString().padStart(2, 0)
let day = date.getDate().toString().padStart(2, 0)
let hour = date.getHours().toString().padStart(2, 0)
let minutes = date.getMinutes().toString().padStart(2, 0)
let seconds = date.getSeconds().toString().padStart(2, 0)
aLink.download = '保存的PDF文件-' + '.pdf'
aLink.click()
window.URL.revokeObjectURL(url)
})
}
2. dom-to-image を使用する
<template>
<div id="pdfDom" ref="pdfDom">
// 此处存放界面中显示的内容区域，生成pdf的内容区域......
</div>
</template>
methods(){
let node = document.getElementById('pdfDom');
domtoimage.toJpeg(node, {
width: node.clientWidth,
height: node.clientHeight,
cacheBust: true,
style: {
margin: 0,
background: '#fff',
}
}).then(function (dataUrl) {
console.log(node.clientWidth)
that.canvasWidth = node.clientWidth;
that.canvasHeight = node.clientHeight;
let imgObj = new Image()
imgObj.src = dataUrl;
document.documentElement.scrollTop = 0
//待图片加载完后，将其显示在canvas上
imgObj.onload = function (img) {
let canvas = document.getElementById("canvasDom");
console.log(canvas.width, canvas.height, 'canvas.width')
canvas.getContext("2d").drawImage(imgObj, 0, 0, that.canvasWidth, that.canvasHeight); //将图片绘制到canvas中
let contentWidth = canvas.width
let contentHeight = canvas.height
let pageHeight = contentWidth / 592.28 * 841.89
let leftHeight = contentHeight
let position = 0
let imgWidth = 595.28
let imgHeight = 592.28 / contentWidth * contentHeight
let pageData = canvas.toDataURL('image/jpeg', 1.0)
let PDF = new jsPDF('', 'pt', 'a4')
if (leftHeight < pageHeight) {
PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) // 大于1页高度时分页
} else {
while (leftHeight > 0) {
PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
if (leftHeight > 0) {
PDF.addPage()
}
}
}
const aLink = document.createElement('a')
document.body.appendChild(aLink)
const url = URL.createObjectURL(that.toBlob(PDF.output('datauristring')))
aLink.href = url
let date = new Date()
let year = date.getFullYear()
let month = (date.getMonth() + 1).toString().padStart(2, 0)
let day = date.getDate().toString().padStart(2, 0)
let hour = date.getHours().toString().padStart(2, 0)
let minutes = date.getMinutes().toString().padStart(2, 0)
let seconds = date.getSeconds().toString().padStart(2, 0)
aLink.download = '保存的PDF文件-' + '.pdf'
aLink.click()
window.URL.revokeObjectURL(url)
}
return dataUrl
})
.catch(function (error) {
console.error('wrong!', error);
});
}