集成PDF.js,然后再在WebView上加载实现查看pdf文件

一、背景:

公司项目有个查看电子发票的功能,发票是pdf文件的,于是开始找方案,有个第三方库,效果不错,兼容性也好,github地址:https://github.com/barteksc/AndroidPdfViewer,但嵌入到项目里app一下增加了15M左右,实在有点难以接受,于是就尝试用js方式实现,经实践可行,包增加4M左右。

二、实现:

public class WebViewActivity extends AppCompatActivity {
    WebView pdfViewerWeb;
    private String downloadUrl="http://119.23.25.170:8088/api/invoice/18770055726-1516342350283.pdf";
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web);
        pdfViewerWeb=findViewById(R.id.webview);

        WebSettings settings = pdfViewerWeb.getSettings();
        settings.setSavePassword(false);
        settings.setJavaScriptEnabled(true);
        settings.setAllowFileAccessFromFileURLs(true);
        settings.setAllowUniversalAccessFromFileURLs(true);

        settings.setUseWideViewPort(true);
        settings.setLoadWithOverviewMode(true);
        settings.setBuiltInZoomControls(true);
        settings.setDisplayZoomControls(false);
        pdfViewerWeb.addJavascriptInterface(new AndroidtoJs(), "android");//AndroidtoJS类对象映射到js的test对象
        pdfViewerWeb.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;

            }

        });
        pdfViewerWeb.setWebChromeClient(new WebChromeClient());


        new Thread(new Runnable() {
            @Override
            public void run() {
                final String download = download();
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {//api >= 19

                            pdfViewerWeb.loadUrl("file:///android_asset/pdfjs/web/viewer.html?file=" + download);

                        }
                    }
                });
            }
        }).start();
    }
    public class AndroidtoJs extends Object {

        // 定义JS需要调用的方法
        // 被JS调用的方法必须加入@JavascriptInterface注解
        @JavascriptInterface
        public void back() {
            WebViewActivity.this.finish();
        }
    }
    //下载具体操作
    private String download() {
        try {
            URL url = new URL(downloadUrl);
            //打开连接
            URLConnection conn = url.openConnection();
            //打开输入流
            InputStream is = conn.getInputStream();
            //获得长度
            int contentLength = conn.getContentLength();
            //创建文件夹 MyDownLoad,在存储卡下
            String dirName = Environment.getExternalStorageDirectory() + "/MyDownLoad/";
            File file = new File(dirName);
            //不存在创建
            if (!file.exists()) {
                file.mkdir();
            }
            //下载后的文件名
            final String fileName = dirName + "invoice.pdf";
            File file1 = new File(fileName);
            if (file1.exists()) {
                file1.delete();
            }
            //创建字节流
            byte[] bs = new byte[1024];
            int len;
            OutputStream os = new FileOutputStream(fileName);
            //写数据
            while ((len = is.read(bs)) != -1) {
                os.write(bs, 0, len);
            }
            //完成后关闭流
            os.close();
            is.close();
            return fileName;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }
}
3.demo地址: pdfdemo

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,需要在项目中添加 WebView2 和 pdf.js 的引用。 1. 在 WinForm 中添加 Webview2 控件: - 在 Visual Studio 中打开 WinForm 项目。 - 在 “工具箱” 中找到 “WebView2” 控件,将其拖到窗体上。 2. 使用 WebView2 控件加载 pdf.js: - 在窗体上添加一个按钮,命名为 “Load PDF”。 - 在按钮的 Click 事件中,使用 WebView2 控件加载 pdf.js: ```csharp private async void btnLoadPDF_Click(object sender, EventArgs e) { await webView21.EnsureCoreWebView2Async(); // 加载 pdf.js string html = $@" <html> <head> <script src=""{Application.StartupPath}\pdfjs-dist\build\pdf.js""></script> </head> <body> <div style=""position: absolute; top: 0; left: 0; right: 0; bottom: 0;""> <canvas id=""pdfCanvas""></canvas> </div> <script> // 加载 PDF 文件 pdfjsLib.getDocument('{Application.StartupPath}\sample.pdf').promise.then(function(pdf) { // 获取第一页并渲染 pdf.getPage(1).then(function(page) { var canvas = document.getElementById('pdfCanvas'); var context = canvas.getContext('2d'); var viewport = page.getViewport({ scale: 1.0 }); canvas.width = viewport.width; canvas.height = viewport.height; var renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext); }); }); </script> </body> </html>"; webView21.CoreWebView2.NavigateToString(html); } ``` 以上代码中,我们使用了 pdf.js 的 API 加载了一个名为 “sample.pdf” 的 PDF 文件,并将其渲染到一个名为 “pdfCanvas” 的 Canvas 元素中。 注意:在使用 pdf.js 渲染 PDF 文件时,需要使用 Canvas 元素来显示 PDF 内容。 3. 运行程序,点击 “Load PDF” 按钮,即可看到加载并渲染出了 PDF 文件的第一页。 以上就是使用 WebView2 控件和 pdf.js 来显示 PDF 文件的示例代码。需要注意的是,以上代码只是一个示例,实际使用时还需要对代码进行适当的修改和优化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值