—— 在线预览下载打印pdf文件插件，实现的两种方式

时间：2024-10-04 07:43:05

ViewerJS简介

ViewerJS的繁重工作是由这些令人敬畏的项目完成的：

（由Mozilla提供）

WebODF（由KO GmbH提供）

运行ViewerJS就像创建链接一样简单。您可以使用它来提供全屏演示，也可以用于在您的网站中内嵌显示文档或作为文档链接的查看器。由于浏览器保护自己免受安全风险（这是一件非常好的事情）的方式，ViewerJS仅适用于驻留在您自己的服务器上的文档。ViewerJS是完整且独立的 - 它不依赖于其他服务。官网地址：/instructions/

两种方式都需要做的事：

1，下载PDF.js， //getting_started/#download

2，将解压出来的三个文件，放入到一个自定义名称的文件夹中，如文件夹命名为pdfjs

使用起来其实只有几句代码：

方式一：将 pdfjs 文件夹 放到 项目服务器目录下

优点：项目不需要增加打包内容

缺点：无法DIY

    

  1. 

    

    
let prefixUrl = 'https://域名/pdfjs文件夹的目录路径/web/?file=';
    

    2. 

  2. 

    

    
let pdfurl = 'https://域名/显示的pdf文件路径/'+ ;
    

    3. 

  3. 

    

    (prefixUrl + pdfurl)
    

    4. 

  4. 

    

    // (prefixUrl + encodeURIComponent(pdfurl)); 本地需要跨域
    

    5.

参考来源：/bianliuzhu/article/details/80622215

方式二：将 pdfjs 文件夹 放到 项目static文件夹下

优点：可以DIY

缺点：增加项目打包内容

    

  1. 

    

    
let prefixUrl = '/static/pdfjs/web/?file=';
    

    2. 

  2. 

    

    
let pdfurl = 'https://域名/显示的pdf文件路径/'+ ;
    

    3. 

  3. 

    

    (prefixUrl + pdfurl)
    

    4.

参考来源：/chen_3010/article/details/64126273

除了使用打开新页面显示，还可以嵌入iframe，如

<iframe :src="currentUrl" ></iframe>

相关文章