David PHAM-VAN

Add web example

@@ -78,7 +78,11 @@ test-readme: $(FONTS) get-readme @@ -78,7 +78,11 @@ test-readme: $(FONTS) get-readme
78 cd test; dart extract_readme.dart 78 cd test; dart extract_readme.dart
79 cd test; dartanalyzer readme.dart 79 cd test; dartanalyzer readme.dart
80 80
81 -test: test-pdf test-printing node_modules 81 +test-web:
  82 + cd pdf/web_example; pub get
  83 + cd pdf/web_example; pub run webdev build
  84 +
  85 +test: test-pdf test-printing node_modules test-web
82 cat pdf/lcov.info printing/lcov.info | node_modules/.bin/lcov-summary 86 cat pdf/lcov.info printing/lcov.info | node_modules/.bin/lcov-summary
83 87
84 clean: 88 clean:
@@ -6,6 +6,7 @@ @@ -6,6 +6,7 @@
6 - Fix Theme.withFont factory 6 - Fix Theme.withFont factory
7 - Implement InheritedWidget 7 - Implement InheritedWidget
8 - Fix Web dependency 8 - Fix Web dependency
  9 +- Add Web example
9 10
10 ## 1.3.17 11 ## 1.3.17
11 12
  1 +# Files and directories created by pub
  2 +.dart_tool/
  3 +.packages
  4 +# Remove the following pattern if you wish to check in your lock file
  5 +pubspec.lock
  6 +
  7 +# Conventional directory for build outputs
  8 +build/
  9 +
  10 +# Directory created by dartdoc
  11 +doc/api/
  1 +
  2 +## Get Started
  3 +
  4 +```shell
  5 +pub get
  6 +pub run webdev serve
  7 +```
  1 +name: web_example
  2 +version: 1.0.0
  3 +homepage: https://github.com/DavBfr/dart_pdf
  4 +author: David PHAM-VAN <dev.nfet.net@gmail.com>
  5 +
  6 +environment:
  7 + sdk: '>=2.2.0 <3.0.0'
  8 +
  9 +dependencies:
  10 + pdf:
  11 +
  12 +dependency_overrides:
  13 + pdf:
  14 + path: ../
  15 +
  16 +dev_dependencies:
  17 + build_runner:
  18 + build_web_compilers:
  19 + webdev:
  1 +<!DOCTYPE html>
  2 +
  3 +<html>
  4 +
  5 +<head>
  6 + <meta charset="utf-8">
  7 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9 + <title>Pdf Web Example</title>
  10 + <link rel="stylesheet" href="styles.css">
  11 + <script defer src="main.dart.js"></script>
  12 +</head>
  13 +
  14 +<body>
  15 + <div>
  16 + <button id="generate">Generate</button>
  17 + </div>
  18 +
  19 + <div id="container">
  20 + <object id="doc" type="application/pdf"></object>
  21 + </div>
  22 +</body>
  23 +
  24 +</html>
  1 +import 'dart:convert';
  2 +import 'dart:html';
  3 +
  4 +import 'package:pdf/pdf.dart';
  5 +import 'package:pdf/widgets.dart';
  6 +
  7 +void main() {
  8 + final ButtonElement generateButton = querySelector('#generate');
  9 +
  10 + generateButton.onClick.listen((_) async {
  11 + final String data = Uri.encodeComponent(base64.encode(buildPdf()));
  12 +
  13 + final ObjectElement doc = querySelector('#doc');
  14 + doc.data = 'data:application/pdf;base64,$data';
  15 + });
  16 +}
  17 +
  18 +List<int> buildPdf() {
  19 + final Document pdf = Document();
  20 +
  21 + pdf.addPage(Page(build: (Context ctx) {
  22 + return Container(
  23 + width: double.infinity,
  24 + height: double.infinity,
  25 + child: FittedBox(
  26 + child: Text(
  27 + 'Hello!',
  28 + style: TextStyle(color: PdfColors.blueGrey),
  29 + ),
  30 + ),
  31 + );
  32 + }));
  33 +
  34 + return pdf.save();
  35 +}
  1 +@import url(https://fonts.googleapis.com/css?family=Roboto);
  2 +
  3 +html,
  4 +body {
  5 + width: 100%;
  6 + height: 100%;
  7 + margin: 0;
  8 + padding: 0;
  9 + font-family: 'Roboto', sans-serif;
  10 +}
  11 +
  12 +#container {
  13 + left: 10px;
  14 + right: 10px;
  15 + width: auto;
  16 + bottom: 10px;
  17 + top: 49px;
  18 + display: block;
  19 + position: absolute;
  20 + border: 1px dotted red;
  21 +}
  22 +
  23 +#doc {
  24 + width: 100%;
  25 + height: 100%;
  26 + display: block;
  27 +}