How do I open a PDF file in a new window (using the native viewer) ? #13652

raptoria · 2025-06-22T01:16:32Z

raptoria
Jun 22, 2025

HI all, n00b here. I've been looking at https://v2.tauri.app/plugin/opener/ but I can't quite figure out what the limitation for IOS/Android means in this documentation Only allows to open URLs via open .

I have written UI code below that works fine in the browser but I've no idea what the correct Tauri 2.0 equivalent is that will work on IOS & Android devices. How would I open this PDF in a new window in the native viewer? Would I write the contents first to some locally declared path? I tried different combinations of security policies, several plugins but to no avail. I've tried calling invoke to a rust function and using openPath from the opener plugin but still no luck. It's all much too embarrassing to post here. Any help would be greatly appreciated!

This is my UI code.

import { cn } from "@/lib/utils";
import { FileText } from "lucide-react";
import { ComponentProps } from "react";
import { toast } from "sonner";

interface PdfProps extends ComponentProps<"div"> {
  name: string | undefined;
  src: string | undefined;
  mediaType: string | undefined;
}

const openinNewWindow = (
  src: string | undefined,
  mediaType: string | undefined
) => {
  if (!src || !mediaType) {
    toast.error("Source or MediaType must be provided to open the PDF");
    return;
  }
  try {
    const newWindow = window.open(
      "",
      "pictureViewer",
      `location=no, directories=no, fullscreen=no`
    );

    if (!newWindow) {
      return;
    }

    newWindow.document.writeln("<html>");
    newWindow.document.writeln("<body style='margin: 0 0 0 0;'>");
    newWindow.document.writeln(
      `<embed src="${src}" type="${mediaType}" height="100%" width="100%" />`
    );
    newWindow.document.writeln("</body></html>");
    newWindow.document.close();
  } catch {
    toast.error("Could not open PDF in a new window");
  }
};

export const Pdf: React.FC<PdfProps> = ({
  name,
  src,
  mediaType,
  className,
}) => {

  return (
    <div
      className={cn(
        "cursor-pointer flex flex-col items-center justify-center p-2 max-h-24 max-w-24 bg-foreground-dark-30/60 rounded-md hover:brightness-120",
        className
      )}
      onClick={() => openinNewWindow(src, mediaType)}
    >
      <FileText className="size-10 stroke-1" />
      <div className="text-xs mb-1">{name}</div>
    </div>
  );
};

Answered by FabianLars

Jun 22, 2025

How does that code behave on mobile? Does it not do anything?

but I can't quite figure out what the limitation for IOS/Android means in this documentation Only allows to open URLs via open .

It means that you can only give website urls (like https://google.com to the plugin, which will open them in the device's default browser). No local files etc allowed. This is about the plugin's methods alone, the default window.open is unrelated to the plugin.

If window.open doesn't work, I don't think there's a solution for you at the moment unless you're okay with writing objective-c / kotlin code. Ideally we can extend the opener plugin to support files as well, which shouldn't be that complicat…

View full answer

FabianLars · 2025-06-22T15:24:46Z

FabianLars
Jun 22, 2025
Maintainer

How does that code behave on mobile? Does it not do anything?

but I can't quite figure out what the limitation for IOS/Android means in this documentation Only allows to open URLs via open .

It means that you can only give website urls (like https://google.com to the plugin, which will open them in the device's default browser). No local files etc allowed. This is about the plugin's methods alone, the default window.open is unrelated to the plugin.

If window.open doesn't work, I don't think there's a solution for you at the moment unless you're okay with writing objective-c / kotlin code. Ideally we can extend the opener plugin to support files as well, which shouldn't be that complicated (for those with a bit of experience in that field) but i can't allocate time for that at the moment.

1 reply

raptoria Jun 22, 2025
Author

How does that code behave on mobile? Does it not do anything?

Yep, nothing happens.

Ah okay, thanks for the clarification! I'm still too new at the moment to be able to lend a helping hand. Thanks for this amazing library!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

How do I open a PDF file in a new window (using the native viewer) ? #13652

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 1 reply

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!

How do I open a PDF file in a new window (using the native viewer) ? #13652

Uh oh!

raptoria Jun 22, 2025

Replies: 1 comment · 1 reply

Uh oh!

FabianLars Jun 22, 2025 Maintainer

Uh oh!

Uh oh!

raptoria Jun 22, 2025 Author

raptoria
Jun 22, 2025

Replies: 1 comment 1 reply

FabianLars
Jun 22, 2025
Maintainer

raptoria Jun 22, 2025
Author