番外网页篇_04

简述

本文介绍公众号浏览网页适配中遇到问题

问题一

微信默认浏览器打开PDF，苹果、安卓体验不一致。

解决办法

使用 pdf.js 进行PDF预览

步骤简述

1、下载分析测试源码

文件目录
2、修改viewer.js中相对路径
修改相对路径viewer.js
3、自定义调整页面中显示按钮，避免手机上按钮拥挤

可通过 `html` 中控制是否显示，也可通过 `viewer.js` 中控制是否显示

默认设置
简化后

问题二

使用PDF预览，点击下载，安卓正常跳转下载，苹果点击无反应

window.open(blobUrl, '_blank');

解决办法

检索发现，苹果使用WKWebview和UIWebview，默认为UIWebview，将弹出修改为调整

        //coin
        var ua = navigator.userAgent.toLowerCase();
        if (/iphone|ipad|ipod/.test(ua)) {
            //alert("iphone");
            parent.window.location = "../../../File/" + filename;
        } else {
            //alert("其他");
            window.open(blobUrl, '_blank');
        }

问题三

苹果上跳转打开PDF后，无法放大缩小，无法分享

复现步骤，右上角，分享给朋友，点击后无响应

解决过程

初步怀疑权限，后续对着分享接口API，w3cschool微信JS-SDK说明文档，配置、设置完整后发现还是无法分享，后续反思页面分享正常，只是PDF直接分享有问题

解决办法

将PDF转成长图嵌入HTML分享，或直接转成HTML分享

问题四

大量PDF文件直接转HTML

解决办法

1、下载 pdf2htmlEX-win32-0.14.6-upx-with-poppler-data，网址
2、解压直接使用，进入CMD目录

解压，进入CMD
3、测试pdf2htmlex -v
测试
4、执行转换 pdf2htmlex File/xxx.pdf File/xxx.html
执行转换

注：批量处理可格式化成多行执行命令，拷贝至命令行执行

#查看当前目录下所有文件
dir /a *
#整理成多行命令
pdf2htmlex File/xxx.pdf File/xxx.html
pdf2htmlex File/yyy.pdf File/yyy.html
pdf2htmlex File/zzz.pdf File/zzz.html

问题五

pdf2htmlex 转换后高度还原pdf，但是html中标题默认为空

解决办法

使用python，替换文件中空标题

#!/usr/bin/env python
# encoding=utf-8

"""
修改本地html内容
"""

# 页面解析，更新
def update_html(static_path,file_name):
    with open(static_path + file_name + '.html', '+r', encoding='utf-8') as f:
        t = f.read()
        t = t.replace('<title></title>', '<title>' + file_name + '</title>')
        #读写偏移位置移到最开始处 
        f.seek(0, 0)    
        f.write(t)

def main():
    static_path = 'E:\\C_Code\\learngit\\Python3_Test\\BaseClass\\update_html\\'

    file_list = ['xxx','yyy','zzz']
    for file_name in file_list:
        update_html(static_path,file_name)
    
if __name__ == '__main__':
    main()

注：读取修改文件时需注意字符格式