怎么样让一个PDF文件实现在手机上预览而不是下载？

FUYUEPC · 发表于 2024-5-23 19:03:18

好比说，在服务器的www/abc/abc.pdf位置有一个文件
怎么写一段代码，可以打开这个PDF文件，而不昰下载呢？
主要是手机上预览，
如：http://www.abc.com/abc/abc.pdf
在电脑上用极速浏览器，是可以直接预览的，但是，手机上就是直接下载了，
我想写一个index.htm
或者是PHP文件来实现，访问http://www.abc.com/index.htm就可以在手机上预览这个文件呢？

观音 · 发表于 2024-5-23 19:03:19

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>  
        <html lang="en">  
        <head>  
            <meta charset="UTF-8">  
            <meta name="viewport" content="width=device-width, initial-scale=1.0">  
            <title>PDF.js with ES Modules</title>  
        </head>  
        <body>  
            <canvas id="pdf-render"></canvas>  
            <script type="module">  
                import { getDocument } from 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.2.67/pdf.min.mjs';  
                pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.2.67/pdf.worker.min.mjs';  

                async function renderPDF() {  
                    // 加载 PDF 文档  
                    const loadingTask = getDocument('AdobeID.pdf');  //这里设置你的PDF路径
                    const pdf = await loadingTask.promise;  
          
                    // 渲染第一页  
                    const page = await pdf.getPage(1);  
                    const scale = 1.5;  
                    const viewport = page.getViewport({ scale });  
          
                    // 准备 canvas 元素  
                    const canvas = document.getElementById('pdf-render');  
                    const context = canvas.getContext('2d');  
                    canvas.height = viewport.height;  
                    canvas.width = viewport.width;  
          
                    // 渲染 PDF 页面到 canvas 上下文  
                    const renderContext = {  
                        canvasContext: context,  
                        viewport: viewport  
                    };  
                    await page.render(renderContext);  
                }  
          
                // 调用函数渲染 PDF  
                renderPDF();  
            </script>  
        </body>  
        </html>

qq73s5456 · 发表于 2024-5-23 19:11:52

浏览器装上 PDF插件就行了吧

观音 · 发表于 2024-5-23 19:14:19

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>  
<html>  
<head>  
    <title>PDF.js Example</title>  
    <script src="path/to/pdf.js"></script>  
</head>  
<body>  
    <canvas id="the-canvas"></canvas>  
    <script>  
        // 假设你有一个PDF文件的URL  
        var url = 'path/to/your/file.pdf';  

        // 使用PDF.js加载PDF  
        PDFJS.getDocument(url).promise.then(function(pdf) {  
            // 使用第一页  
            pdf.getPage(1).then(function(page) {  
                var scale = 1.5;  
                var viewport = page.getViewport({ scale: scale });  

                // 准备canvas元素  
                var canvas = document.getElementById('the-canvas');  
                var context = canvas.getContext('2d');  
                canvas.height = viewport.height;  
                canvas.width = viewport.width;  

                // 渲染PDF页面到canvas  
                var renderContext = {  
                    canvasContext: context,  
                    viewport: viewport  
                };  
                page.render(renderContext);  
            });  
        });  
    </script>  
</body>  
</html>

[HTML] 纯文本查看 复制代码

<iframe src="path/to/your/file.pdf" width="100%" height="600px"></iframe>

[HTML] 纯文本查看 复制代码

观音 · 发表于 2024-5-23 19:14:48

观音发表于 2024-5-23 19:14
[HTML] 纯文本查看 复制代码
  
  
  

[mw_shl_code=html,true]<object data="path/to/your/file.pdf" type="application/pdf" width="100%" height="600px"> <p>Your browser does not support PDFs. Please download the PDF to view it: <a href="path/to/your/file.pdf">Download PDF</a>.</p> </object>

FUYUEPC · 发表于 2024-5-23 19:28:33

观音发表于 2024-5-23 19:14
[mw_shl_code=html,true]

这个是不是还要在网站上放一个PDF.JS这个文件呢？如果是，能提供一下吗？

观音 · 发表于 2024-5-23 19:34:33

FUYUEPC 发表于 2024-5-23 19:28
这个是不是还要在网站上放一个PDF.JS这个文件呢？如果是，能提供一下吗？ ...

github一搜不就好了

观音 · 发表于 2024-5-23 19:36:02

https://blog.csdn.net/For_GG/article/details/78616063

https://mozilla.github.io/pdf.js/

https://github.com/mozilla/pdf.js

FUYUEPC · 发表于 2024-5-23 19:51:04

观音发表于 2024-5-23 19:36
https://blog.csdn.net/For_GG/article/details/78616063

https://mozilla.github.io/pdf.js/

说实在的，我在提问前搜索了，我就是没有弄明白这个PDF.JS怎么用，一直没有成功，才上来问的

观音 · 发表于 2024-5-23 20:13:56

FUYUEPC 发表于 2024-5-23 19:51
说实在的，我在提问前搜索了，我就是没有弄明白这个PDF.JS怎么用，一直没有成功，才上来问的 ...

这玩意文档写的那么详细现在AI这么智能随便问问不就会了
path/to/your/file.pdf 替换成你PDF的路径

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>  
<html>  
<head>  
    <title>PDF.js Example</title>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.2.67/pdf.min.mjs"></script>  
</head>  
<body>  
    <canvas id="the-canvas"></canvas>  
    <script>  
        // 假设你有一个PDF文件的URL  
        var url = 'path/to/your/file.pdf';  

        // 使用PDF.js加载PDF  
        PDFJS.getDocument(url).promise.then(function(pdf) {  
            // 使用第一页  
            pdf.getPage(1).then(function(page) {  
                var scale = 1.5;  
                var viewport = page.getViewport({ scale: scale });  

                // 准备canvas元素  
                var canvas = document.getElementById('the-canvas');  
                var context = canvas.getContext('2d');  
                canvas.height = viewport.height;  
                canvas.width = viewport.width;  

                // 渲染PDF页面到canvas  
                var renderContext = {  
                    canvasContext: context,  
                    viewport: viewport  
                };  
                page.render(renderContext);  
            });  
        });  
    </script>  
</body>  
</html>

		自动登录	找回密码
密码			注册

[已解决] 怎么样让一个PDF文件实现在手机上预览而不是下载？

最佳答案

评分