Vue2中使用firefox的pdfjs进行文件文件流预览

文章目录

1.使用场景

pdf链接或者pdf文件流的预览

2. 使用方式

1. npm 包下载,点击查看

npm i pdfjs-dist // 此种方式,不过多介绍,网上都是

2. 官网下载

1. 放到public文件夹下面

2. 官网下载地址点我,进入官网

由于是github可能有些网络进不去,可以通过网盘下载

链接: https://pan.baidu.com/s/1cG06QTtWwTSTSzOPWy5NQg?pwd=rcnm 提取码: rcnm

3. 代码演示

js 复制代码
<template>
    <div class="pdf-preview">
        <el-row>
            <el-col :span="24">
                <el-button @click="handleChooseLocalFile" type="primary">选择本地文件</el-button>
            </el-col>
        </el-row>
        <iframe class="pdf-iframe" :src="previewURL" width="100%" height="800px" v-if="previewURL"></iframe>
    </div>
</template>
<script>
export default {
    name: "pdfPreview",
    data() {
        return {
            // public 下面的路径
            pdfJsViewer: "/pdfjs-4.8.69/web/viewer.html",
            fileUrl: "/pdfjs-4.8.69/web/compressed.tracemonkey-pldi-09.pdf",
        };
    },

    computed: {
        previewURL() {
            return this.fileUrl ? `${this.pdfJsViewer}?file=${encodeURIComponent(this.fileUrl)}` : "";
        },
    },
    methods: {
        handleChooseLocalFile() {
            let input = document.createElement("input");
            input.type = "file";
            input.accept = ".pdf";
            input.multiple = false;
            input.onchange = (e) => {
                let file = e.target.files[0];
                if (file) {
                    this.fileUrl = URL.createObjectURL(file);
                }
            };
            input.click();
            input.remove();
        },
    },
};
</script>

<style scoped lang="scss">
.inner-tool {
    display: flex;
    flex-direction: column;
}
.pdf-preview {
    flex: 1;
}
.pdf-iframe {
    margin-top: 20px;
    height: calc(100vh - 150px);
}
</style>

4. 图片预览

5. 如果遇到跨域或者application/octet-stream等问题

参考大佬 平凡的人类 空白

相关推荐
yuchangchenTT3 分钟前
就是这个样的粗爆,手搓一个计算器:JSON格式化计算器
前端·json·365快速计算器·在线计算器
乐闻x6 分钟前
Vue Router 详细使用步骤:如何在 Vue 项目中配置 Vue Router
前端·javascript·vue.js
聚宝盆_8 分钟前
【css flex 多行均分有间隙布局】
前端·css
弗拉唐10 分钟前
SSM中maven
java·前端·maven
零希15 分钟前
CSS元素类型(二)
前端·javascript·css
煎饼果子呀19 分钟前
css-flex布局属性
开发语言·前端·css·html5
超栈21 分钟前
蓝桥杯-网络安全比赛题目-遗漏的压缩包
前端·网络·sql·安全·web安全·职场和发展·蓝桥杯
hello world smile26 分钟前
最全的Flutter中pubspec.yaml及其yaml 语法的使用说明
android·前端·javascript·flutter·dart·yaml·pubspec.yaml
沈阳-施立38 分钟前
CSS例子: 胶囊按钮
前端·css
前端Hardy1 小时前
超萌!HTML&CSS:打造趣味动画卡通 dog
前端·css·html·css3