David PHAM-VAN

Add web example

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