查看pdf而不是使用PDF js下载 [英] View pdf instead of download using PDF js

问题描述

在我的页面中，我正在尝试使用PDF JS显示pdf的缩略图，并且该缩略图可在本地使用，但是当我在网络服务器中上传代码时，会自动下载pdf文件.

In my page, I'm trying to display a thumbnails of my pdf using PDF JS and it works on local, but when I upload my code in my webserver the pdf file is auto download.

在我的本地:

代码:

$(function() {  

        var filePath = "http://example.com/public/uploads/docs/Document_One_1.pdf";

        function Num(num) {
            var num = num;

            return function () {
                return num;
            }
        };

        function renderPDF(url, canvasContainer, options) {
            var options = options || {
                    scale: 1.1
                },          
                func,
                pdfDoc,
                def = $.Deferred(),
                promise = $.Deferred().resolve().promise(),         
                width, 
                height,
                makeRunner = function(func, args) {
                    return function() {
                        return func.call(null, args);
                    };
                };

            function renderPage(num) {          
                var def = $.Deferred(),
                    currPageNum = new Num(num);
                pdfDoc.getPage(currPageNum()).then(function(page) {
                    var viewport = page.getViewport(options.scale);
                    var canvas = document.createElement("canvas");
                    canvas.setAttribute("id","pdfCanvas"+num);
                    canvas.setAttribute("onclick","popCanvas('{{url('/dashboard/showcanvas')}}','"+document.getElementById('pdfPath').innerHTML+"','"+num+"');");
                    var ctx = canvas.getContext('2d');
                    var renderContext = {
                        canvasContext: ctx,
                        viewport: viewport
                    };

                    if(currPageNum() === 1) {                   
                        height = viewport.height;
                        width = viewport.width;
                    }

                    canvas.height = height;
                    canvas.width = width;

                    canvasContainer.appendChild(canvas);

                    page.render(renderContext).then(function() {                                        
                        def.resolve();
                    });
                })

                return def.promise();
            }

            function renderPages(data) {
                pdfDoc = data;

                var pagesCount = pdfDoc.numPages;
                for (var i = 1; i <= pagesCount; i++) { 
                    func = renderPage;
                    promise = promise.then(makeRunner(func, i));
                }
            }

            PDFJS.disableWorker = true;
            PDFJS.getDocument(url).then(renderPages);       
        };

        var body = document.getElementById("bodyofpdf");
        renderPDF(filePath, body);
    });

当我更改文件路径URL时，例如:" https://www.tutorialspoint. com/bootstrap/bootstrap_tutorial.pdf "，它可以正常工作.

When I change the filepath url, for example: "https://www.tutorialspoint.com/bootstrap/bootstrap_tutorial.pdf", it works.

有人可以帮我吗?

对不起，我的英语不好.

Sorry for my poor english.

推荐答案

如果您使用的是Laravel，则可以控制路线的行为，包括一个到.pdf的路线.对于本地文件，默认情况下，浏览器的行为与没有本地文件时不同.

If you are using Laravel you can control the behaviour of the routes, including the one to a .pdf. For local files, browsers have a different behaviour by default than for no local files.

我已经使用了很多PDF.js，但我不知道您为什么将用户直接链接到文件，您可以创建一个类似于视图页面的视图，该页面可以获取参数，例如ID或书名，然后用pdf.js加载它.如果您使用带有文件扩展名的url，则可能会使浏览器感到困惑.

I have used a lot PDF.js and I don't know why do you link the user directly to the file, you could create like a view page where it gets a parameter like the id or the name of the book and then you load it with pdf.js. If you use an url with a file extension you will probably confuse the browser.

yourpage.com/books/view/{id_book}

这篇关于查看pdf而不是使用PDF js下载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！