绘图文字

此示例显示如何向页面添加文本。

每个绘图区域提供 drawText 方法来绘制文本。 它需要以下参数:

  • 要绘制的文字
  • 绘制文本的点的X坐标(可选)
  • 绘制文本的点的Y坐标(可选)
  • 文字绘图选项(可选)

例如:

doc.drawText("Lorem.");
doc.drawText("Ipsum.", 0, 30);

当前文本坐标

有一个当前文本坐标的概念,由绘图区域的 xy 属性表示。如果未定义定位参数,则drawText方法使用这些坐标。每次调用drawText方法都会在内部更新当前文本坐标(即使坐标已明确传递给方法),因此,任何后续文本都会放在前一个文本下面。

使用绘图区域的 moveDownmoveUp方法将Y坐标向下或向上移动给定的行数(默认值= 1)。

包装,剪裁和对齐

文本在如下定义的矩形区域内绘制:

  • x和y参数确定区域的左上角。如果省略,则使用当前文本坐标。
  • options.width和options.height属性确定区域的大小。如果省略options.width,则该区域将被页面的右边距水平限制。如果省略options.height,则该区域将由主体部分的底部边缘垂直限制。使用Infinity指示该区域在该方向上具有无限大小。

文本在区域内自动包装和剪裁。如果未定义 options.height ,则如果文本超出正文部分的下边缘,则文本将自动扩展到新页面。

使用 options.align 属性确定文本应如何在区域内水平对齐。支持以下对齐方法:left(默认),center,right,justify。

例如,以下代码使用当前文本坐标在300x100矩形内绘制文本,并将其与右对齐。

doc.drawText("Lorem", null, null, {
    height: 100,
    width: 300,
    align: wijmo.pdf.PdfTextHorizontalAlign.Right
});

此示例说明了 drawText 方法的基本用法。

import 'bootstrap.css'; import './styles.css'; import * as pdf from '@grapecity/wijmo.pdf'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { document.querySelector('#btnExport').addEventListener('click', () => { let lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in suscipit purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus nec hendrerit felis. Morbi aliquam facilisis risus eu lacinia.'; let doc = new pdf.PdfDocument({ header: { height: 0 // no header }, footer: { height: 0 // no footer }, ended: (sender, args) => pdf.saveBlob(args.blob, 'Document.pdf') }); // let bold = new pdf.PdfFont(); bold.weight = 'bold'; // doc.drawText('This text is aligned to left (default):', null, null, { font: bold }); doc.drawText(lorem); doc.moveDown(); // doc.drawText('This text is aligned to right:', null, null, { font: bold }); doc.drawText(lorem, null, null, { align: pdf.PdfTextHorizontalAlign.Right }); doc.moveDown(); // doc.drawText('This text is centered:', null, null, { font: bold }); doc.drawText(lorem, null, null, { align: pdf.PdfTextHorizontalAlign.Center }); doc.moveDown(); // doc.drawText('This text is justified:', null, null, { font: bold }); doc.drawText(lorem, null, null, { align: pdf.PdfTextHorizontalAlign.Justify }); doc.moveDown(); // doc.drawText('This text is wrapped and clipped by a rectangle of dimensions 100x100:', null, null, { font: bold }); doc.drawText(lorem, null, null, { width: 100, height: 100 }); // doc.end(); }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Drawing text</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <!-- Export button --> <button class="btn btn-default" id="btnExport">Export</button> </div> </body> </html> body { margin-bottom: 24px; } import 'bootstrap.css'; import './styles.css'; // import * as pdf from '@grapecity/wijmo.pdf'; // import { Component, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { export() { let lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in suscipit purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus nec hendrerit felis. Morbi aliquam facilisis risus eu lacinia.'; let doc = new pdf.PdfDocument({ header: { height: 0 // no header }, footer: { height: 0 // no footer }, ended: (sender: pdf.PdfDocument, args: pdf.PdfDocumentEndedEventArgs) => pdf.saveBlob(args.blob, 'Document.pdf') }); // let bold = new pdf.PdfFont(); bold.weight = 'bold'; // doc.drawText('This text is aligned to left (default):', null, null, { font: bold }); doc.drawText(lorem); doc.moveDown(); // doc.drawText('This text is aligned to right:', null, null, { font: bold }); doc.drawText(lorem, null, null, { align: pdf.PdfTextHorizontalAlign.Right }); doc.moveDown(); // doc.drawText('This text is centered:', null, null, { font: bold }); doc.drawText(lorem, null, null, { align: pdf.PdfTextHorizontalAlign.Center }); doc.moveDown(); // doc.drawText('This text is justified:', null, null, { font: bold }); doc.drawText(lorem, null, null, { align: pdf.PdfTextHorizontalAlign.Justify }); doc.moveDown(); // doc.drawText('This text is wrapped and clipped by a rectangle of dimensions 100x100:', null, null, { font: bold }); doc.drawText(lorem, null, null, { width: 100, height: 100 }); // doc.end(); } } // @NgModule({ imports: [BrowserModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Drawing text</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <!-- Export button --> <button class="btn btn-default" (click)="export()">Export</button> </div> body { margin-bottom: 24px; } <template> <div class="container-fluid"> <!-- Export button --> <button class="btn btn-default" @click="exportPDF">Export</button> </div> </template> <script> import 'bootstrap.css'; import Vue from 'vue'; import * as pdf from '@grapecity/wijmo.pdf'; // let App = Vue.extend({ name: 'app', methods: { exportPDF() { let lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in suscipit purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus nec hendrerit felis. Morbi aliquam facilisis risus eu lacinia.'; let doc = new pdf.PdfDocument({ header: { height: 0 // no header }, footer: { height: 0 // no footer }, ended: (sender, args) => pdf.saveBlob(args.blob, 'Document.pdf') }); // let bold = new pdf.PdfFont(); bold.weight = 'bold'; // doc.drawText('This text is aligned to left (default):', null, null, { font: bold }); doc.drawText(lorem); doc.moveDown(); // doc.drawText('This text is aligned to right:', null, null, { font: bold }); doc.drawText(lorem, null, null, { align: pdf.PdfTextHorizontalAlign.Right }); doc.moveDown(); // doc.drawText('This text is centered:', null, null, { font: bold }); doc.drawText(lorem, null, null, { align: pdf.PdfTextHorizontalAlign.Center }); doc.moveDown(); // doc.drawText('This text is justified:', null, null, { font: bold }); doc.drawText(lorem, null, null, { align: pdf.PdfTextHorizontalAlign.Justify }); doc.moveDown(); // doc.drawText('This text is wrapped and clipped by a rectangle of dimensions 100x100:', null, null, { font: bold }); doc.drawText(lorem, null, null, { width: 100, height: 100 }); // doc.end(); } } }) // new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> body { margin-bottom: 24px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Drawing text</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"></div> </body> </html> import "@grapecity/wijmo.styles/wijmo.css"; import "bootstrap.css"; import "./app.css"; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; // import * as pdf from "@grapecity/wijmo.pdf"; class App extends React.Component { constructor(props) { super(props); } render() { return <div className="container-fluid"> <button className="btn btn-default" onClick={this.exportPDF.bind(this)}>Export</button> </div>; } exportPDF() { let lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in suscipit purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus nec hendrerit felis. Morbi aliquam facilisis risus eu lacinia.'; let doc = new pdf.PdfDocument({ header: { height: 0 // no header }, footer: { height: 0 // no footer }, ended: (sender, args) => pdf.saveBlob(args.blob, 'Document.pdf') }); // let bold = new pdf.PdfFont(); bold.weight = 'bold'; // doc.drawText('This text is aligned to left (default):', null, null, { font: bold }); doc.drawText(lorem); doc.moveDown(); // doc.drawText('This text is aligned to right:', null, null, { font: bold }); doc.drawText(lorem, null, null, { align: pdf.PdfTextHorizontalAlign.Right }); doc.moveDown(); // doc.drawText('This text is centered:', null, null, { font: bold }); doc.drawText(lorem, null, null, { align: pdf.PdfTextHorizontalAlign.Center }); doc.moveDown(); // doc.drawText('This text is justified:', null, null, { font: bold }); doc.drawText(lorem, null, null, { align: pdf.PdfTextHorizontalAlign.Justify }); doc.moveDown(); // doc.drawText('This text is wrapped and clipped by a rectangle of dimensions 100x100:', null, null, { font: bold }); doc.drawText(lorem, null, null, { width: 100, height: 100 }); // doc.end(); } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Grapecity Wijmo OLAP Pivot Chart Overview</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> body { margin-bottom: 24px; }