H5页面 点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？

Question

H5页面 点击按钮使用window.open 打开并展示一个pdf，安卓手机变成下载了？需要在移动端也是预览怎么实现呢？

 $('#el').on('click', function () {
    window.open('https:xxx.pdf, '_blank');
})

Answer 1

掘金上也有分享：移动端 h5实现 pdf 预览 和下载
这个插件：cordova-plugin-document-viewer:
或者用PDF.js 库：

<div id="pdf-viewer" style="width: 100%; height: 600px;"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
<script>
    const url = 'https://xxx.pdf';
    const pdfjsLib = window['pdfjs-dist/build/pdf'];
    pdfjsLib.GlobalWorkerOptions.workerSrc = '//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js';

    pdfjsLib.getDocument(url).promise.then(pdf => {
        // Fetch the first page
        pdf.getPage(1).then(page => {
            const scale = 1.5;
            const viewport = page.getViewport({ scale: scale });
            const canvas = document.createElement('canvas');
            const context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            document.getElementById('pdf-viewer').appendChild(canvas);

            // Render PDF page into canvas context
            const renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            page.render(renderContext);
        });
    });
</script>

Answer 2

对应的浏览器不支持PDF格式，就会是下载。如果浏览器支持就会是在线预览。

如果要保证在线预览。按照项目技术栈，在项目内加一个 PDF Preview 的依赖就行了。
pdf preview - npm search

Answer 3

可以参考这篇文章
H5移动端文件预览pdf