使用 Flutter web 生成 PDF 文件答案

【问题标题】：PDF File generation with Flutter web使用 Flutter web 生成 PDF 文件
【发布时间】：2020-12-08 07:52:08
【问题描述】：

我正在开发一个 Flutter 移动应用程序并尝试解决 Web 中对 Path Provider 的支持不足的问题。

我正在使用 PDF (pdf: ^1.9.0) 包生成 PDF 文档并将其上传到 Google 云端硬盘，我正在尝试确定是否可以生成 PDF 并将其存储在内存中以制作它网络兼容。

使用路径提供程序的当前代码示例。

createFile() async {
  final downloads = await getApplicationSupportDirectory();
  final file = File("${downloads.path}/$filename.pdf");
  await file.writeAsBytes(pdf.save());
  await GoogleDriveController.uploadFileToGoogleDrive(file.path);
}

问题：有没有办法使用 Flutter web 为 web 生成 Fies 并将其存储在内存中？

【问题讨论】：

不，你不能在内存中存储Files
@pskink 感谢您的确认，看来我必须将其卸载到 GCP 功能。

标签： flutter dart

【解决方案1】：

我的答案是上面 Yonkee 的一个变体，专门针对颤振网络。在这个答案中，我添加了所需的导入（dart:html 和 dart:typed_data），并根据需要添加了文本格式。

import 'package:flutter/material.dart';
import 'package:pdf/widgets.dart' as pw;
import 'dart:typed_data';
import 'dart:html' as html;

class PDFSave extends StatefulWidget {

  @override
  _PDFSaveState createState() => _PDFSaveState();
}

class _PDFSaveState extends State<PDFSave> {

  final pdf = pw.Document();
  var anchor;

  savePDF() async {
    Uint8List pdfInBytes = await pdf.save();
    final blob = html.Blob([pdfInBytes], 'application/pdf');
    final url = html.Url.createObjectUrlFromBlob(blob);
    anchor = html.document.createElement('a') as html.AnchorElement
      ..href = url
      ..style.display = 'none'
      ..download = 'pdf.pdf';
    html.document.body.children.add(anchor);
  }


  createPDF() async {

  pdf.addPage(
    pw.Page(
      build: (pw.Context context) => pw.Column(
        children: [
          pw.Text('Hello World', style: pw.TextStyle(fontSize: 40)),
        ],
      ),
    ),
  );
  savePDF();
}

@override
  void initState() {
    super.initState();
    createPDF();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(backgroundColor: Colors.transparent,
        appBar: AppBar(
      title: Text('PDF Creator'),
    ),
    body: Center(
      child:RaisedButton(
        child: Text('Press'),
        onPressed: () {
          anchor.click();
          Navigator.pop(context);
        },
      )
    ));
  }
}

【讨论】：

【解决方案2】：

我设法找到了一种解决方法来生成 PDF 并改为通过浏览器触发下载，并认为我应该发布以防万一有人偶然发现。

//Create PDF in Bytes 
Uint8List pdfInBytes = pdf.save();
    
//Create blob and link from bytes
final blob = html.Blob([pdfInBytes], 'application/pdf');
final url = html.Url.createObjectUrlFromBlob(blob);
final anchor = html.document.createElement('a') as html.AnchorElement
     ..href = url
     ..style.display = 'none'
     ..download = 'pdf.pdf';
html.document.body.children.add(anchor);
    
//Trigger the download of this PDF in the browser.
    
RaisedButton(
   child: Text('Press'),
       onPressed: () {
         anchor.click();
         Navigator.pop(context);
       },
   )

【讨论】：