Skip to content

919503_f1 Save a sample in Flutter WASM #1020

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 18, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 45 additions & 5 deletions Flutter/pdf/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ Create a simple project using the instructions given in the [`Getting Started wi

Add the Syncfusion Flutter PDF dependency to your pub spec file.

{% highlight dart %}
{% highlight dart %}

dependencies:
syncfusion_flutter_pdf: ^xx.x.xx
Expand All @@ -32,7 +32,7 @@ N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter PDF`](ht

Run the following command to get the required packages.

{% highlight dart %}
{% highlight dart %}

$ flutter pub get

Expand All @@ -42,15 +42,15 @@ $ flutter pub get

Import the following package in your Dart code.

{% highlight dart %}
{% highlight dart %}

import 'package:syncfusion_flutter_pdf/pdf.dart';

{% endhighlight %}

Add a new button widget as a child of your container widget.

{% highlight dart %}
{% highlight dart %}

@override
Widget build(BuildContext context) {
Expand Down Expand Up @@ -97,7 +97,7 @@ You can save and open a PDF document in mobile by using the following steps:

Add the following packages to your pub spec file.

{% highlight dart %}
{% highlight dart %}

path_provider: ^2.0.7
open_file: ^3.2.1
Expand Down Expand Up @@ -178,6 +178,46 @@ Add the following code in the header section of index.html file under the web fo

{% endhighlight %}

## Save and download a PDF document in WASM

step 1: Add the [web](https://pub.dev/packages/web) package as a dependency in your **pubspec.yaml** file.

step 2: Create a new Dart file called **save_file_wasm.dart**.

step 3: Add the following code:

**Import package**

{% highlight dart %}

import 'dart:convert';
import 'package:web/web.dart' as web;

{% endhighlight %}

To enable file saving and launching for download in a web environment, include the following code snippet within the **saveAndLaunchFile** method.

{% highlight dart %}

// Function to save and launch a file for download in a web environment
Future<void> saveAndLaunchFile(List<int> bytes, String fileName) async {
final web.HTMLAnchorElement anchor =
web.document.createElement('a') as web.HTMLAnchorElement
..href = "data:application/octet-stream;base64,${base64Encode(bytes)}"
..style.display = 'none'
..download = fileName;

// Insert the new element into the DOM
web.document.body!.appendChild(anchor);

// Initiate the download
anchor.click();
// Clean up the DOM by removing the anchor element
web.document.body!.removeChild(anchor);
}

{% endhighlight %}

By executing the above code sample, you will get the PDF document as follows.

![Getting started PDF](images/getting-started/default.jpg)
Expand Down