New window with pdf content #10265

ithustle · 2024-07-12T09:55:32Z

ithustle
Jul 12, 2024

I'm trying to open a new window with a pdf file content using the following code:


export async function openInvoicePDF(path: string) {
    console.log("Invoice path", path)

    const content = await readBinaryFile(path, { dir: BaseDirectory.AppData })

    const invoiceWindow = new WebviewWindow('invoiceWindow', {
        url: `data:application/pdf;base64,${Buffer.from(content).toString('base64')}`,
        title: "Factura",
        width: 800,
        height: 600,
        center: true,
        fileDropEnabled: true
    })

    invoiceWindow.once('tauri://created', () => {
        console.log("Criada")
    })

    invoiceWindow.once('tauri://error', (e) => {
        console.log("Erro ao criar a janela de factura", e)
    })
}

But this is the result:

I really appreciate any help

Answered by ithustle

Jul 12, 2024

@newproplus, thanks for you response.

I solve this problem doing this:

import { WebviewWindow } from '@tauri-apps/api/window';
import { Buffer } from "buffer"
import { readBinaryFile, BaseDirectory } from '@tauri-apps/api/fs';

export async function openInvoicePDF(path: string) {

    const content = await readBinaryFile(path, { dir: BaseDirectory.AppCache })
    const base64PDF = Buffer.from(content).toString('base64')

    const invoiceWindow = new WebviewWindow('invoiceWindow', {
        url: `invoicePdfViewer.html?pdfData=${encodeURIComponent(base64PDF)}`,
        title: "Factura",
        width: 800,
        height: 600,
        center: true,
        fileDropEnabled: true
    })

   …

View full answer

cathino · 2024-07-12T12:12:09Z

cathino
Jul 12, 2024

you should render the pdf by yourself , tauri wrapped the webview, but it's not a complete browser, maybe you can take a look at pdf.js

1 reply

ithustle Jul 12, 2024
Author

@newproplus, thanks for you response.

I solve this problem doing this:

import { WebviewWindow } from '@tauri-apps/api/window';
import { Buffer } from "buffer"
import { readBinaryFile, BaseDirectory } from '@tauri-apps/api/fs';

export async function openInvoicePDF(path: string) {

    const content = await readBinaryFile(path, { dir: BaseDirectory.AppCache })
    const base64PDF = Buffer.from(content).toString('base64')

    const invoiceWindow = new WebviewWindow('invoiceWindow', {
        url: `invoicePdfViewer.html?pdfData=${encodeURIComponent(base64PDF)}`,
        title: "Factura",
        width: 800,
        height: 600,
        center: true,
        fileDropEnabled: true
    })

    invoiceWindow.once('tauri://created', () => {
        console.log("Criada")
    })

    invoiceWindow.once('tauri://error', (e) => {
        console.log("Erro ao criar a janela de factura", e)
    })
}

//invoicePdfViewer.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Invoice</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }
        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
</head>
<body>
    <iframe id="pdf-frame"></iframe>
    <script>
        const urlParams = new URLSearchParams(window.location.search);
        const pdfData = urlParams.get('pdfData');
        if (pdfData) {
            document.getElementById('pdf-frame').src = `data:application/pdf;base64,${pdfData}`;
        }
    </script>
</body>
</html>

Answer selected by ithustle

cathino · 2024-07-12T12:12:31Z

cathino
Jul 12, 2024

You should render the PDF by yourself, Tauri wrapped the webview, but it's not a complete browser, Maybe you can take a look at pdf. js

0 replies

killercup · 2025-03-13T14:51:51Z

killercup
Mar 13, 2025

In case anyone needs a newer version of this, this works (as of tauri 2.3.1):

# Cargo.toml
tauri = { version = "2", features = ["unstable", "webview-data-url"] }

import { error, info } from "@tauri-apps/plugin-log";
import { WebviewWindow } from "@tauri-apps/api/webviewWindow";
import { BaseDirectory, readFile } from "@tauri-apps/plugin-fs";

export async function openInvoicePDF(path: string, contentType: string = "application/pdf") {
  const content = await readFile(path, {
    baseDir: BaseDirectory.AppData,
  });
  const base64 = await bufferToBase64(content);
  const invoiceWindow = new WebviewWindow(`invoice`, { // maybe use uniq label here
    url: `data:${contentType};base64,${base64}`,
    x: 0,
    y: 0,
    width: 800,
    height: 600,
  });

  invoiceWindow.once("tauri://created", () => {
    info(`Opened window with invoice ${upload.id}`);
  });

  invoiceWindow.once("tauri://error", (e) => {
    error(`Error opening invoice window ${upload.id}: ${JSON.stringify(e)}`);
  });
}

// from https://stackoverflow.com/a/66046176
async function bufferToBase64(buffer: Uint8Array) {
  const base64url = await new Promise<string>((r) => {
    const reader = new FileReader();
    reader.onload = () => r(reader.result as string);
    reader.readAsDataURL(new Blob([buffer]));
  });
  return base64url.slice(base64url.indexOf(",") + 1);
}

And add the necessary capabilities:

    "core:webview:default",
    "core:webview:allow-create-webview-window",
    "core:webview:allow-create-webview"

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

New window with pdf content #10265

Uh oh!

{{title}}

Uh oh!

Replies: 3 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Uh oh!

New window with pdf content #10265

Uh oh!

ithustle Jul 12, 2024

Replies: 3 comments · 1 reply

Uh oh!

cathino Jul 12, 2024

Uh oh!

ithustle Jul 12, 2024 Author

Uh oh!

cathino Jul 12, 2024

Uh oh!

Uh oh!

killercup Mar 13, 2025

ithustle
Jul 12, 2024

Replies: 3 comments 1 reply

cathino
Jul 12, 2024

ithustle Jul 12, 2024
Author

cathino
Jul 12, 2024

killercup
Mar 13, 2025