pdf预览引发的vue项目只允许Chrome浏览器访问

最新推荐文章于 2024-07-26 11:47:53 发布

摩羯座小薛

最新推荐文章于 2024-07-26 11:47:53 发布

阅读量617

点赞数

分类专栏：项目遇到的问题文章标签： chrome 前端 javascript vue

本文链接：https://blog.csdn.net/weiwei_xue/article/details/125679023

版权

本文记录了一个Vue项目中实现PDF在线预览功能的过程，由于预览效果只在Chrome浏览器生效，因此设置了项目仅允许Chrome浏览器访问。通过后端返回流文件，前端利用window.open打开PDF并隐藏工具栏。同时，通过判断浏览器内核，当检测到非Chrome浏览器时显示提示信息。此外，还介绍了在用户无token情况下阻止页面访问的实现，通过router.beforeEach进行权限检查。

摘要由CSDN通过智能技术生成

前言：

项目中需要把原本下载pdf功能改成在线预览，只能预览不能进行其他操作，通过在地址后面拼接参数可以隐藏掉工具栏，但是只对chrome生效，所以又增加了访问权限，只对chrome浏览器开放,记录一下

一、pdf在线预览，后端返回流文件，前端window.open打开

通过添加"#view=FitH,top&toolbar=0"

interface OPTIONSTYPE {
    url: String,
    method: String,
    params: Object
}
export function onlineViewPdf(optionsz:OPTIONSTYPE) {
    const { url, method, params } = options;
    let config = {
        url: url,
        method: method,
        responseType: "blob",
        params: params,
        headers: {
            "X-Access-Token": getStore("token") ? getStore("token") : ""
        }
    };

    axios(config).then(response => {
        let data = response.data;
        // 请求失败，后台返回json
        if (data.type.includes("application/json")) {
            let