在Android APK中使用WebView加载Vue项目并实现文件导出

在Android APK中使用WebView加载Vue项目并实现文件导出

需要完成以下几个步骤：

1. 基本WebView集成

首先，在Android应用中设置WebView来加载你的Vue项目：

// MainActivity.java
public class MainActivity extends AppCompatActivity {
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = findViewById(R.id.webview);
        WebSettings webSettings = webView.getSettings();
        
        // 启用JavaScript
        webSettings.setJavaScriptEnabled(true);
        
        // 允许文件访问
        webSettings.setAllowFileAccess(true);
        webSettings.setAllowContentAccess(true);
        
        // 添加JavaScript接口
        webView.addJavascriptInterface(new WebAppInterface(this), "Android");
        
        // 加载Vue项目URL或本地文件
        webView.loadUrl("file:///android_asset/dist/index.html"); // 如果打包在assets中
        // 或 webView.loadUrl("http://your-vue-app-url.com");
    }
}

2. 创建JavaScript接口

创建一个类来处理JavaScript与Android原生代码的交互：

// WebAppInterface.java
public class WebAppInterface {
    private Context mContext;

    public WebAppInterface(Context context) {
        mContext = context;
    }

    @JavascriptInterface
    public void saveFile(String fileName, String base64Data) {
        try {
            // 解码Base64数据
            byte[] data = Base64.decode(base64Data, Base64.DEFAULT);
            
            // 在Android设备上保存文件
            File file = new File(Environment.getExternalStoragePublicDirectory(
                    Environment.DIRECTORY_DOWNLOADS), fileName);
            
            FileOutputStream fos = new FileOutputStream(file);
            fos.write(data);
            fos.close();
            
            // 通知用户文件已保存
            Toast.makeText(mContext, "文件已保存到下载目录", Toast.LENGTH_SHORT).show();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

3. Vue项目中的实现

在Vue项目中，创建一个方法来处理文件导出并通过JavaScript接口调用Android方法：

// 导出文件的方法
export function exportFile(fileName, data, mimeType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
  // 创建Blob对象
  const blob = new Blob([data], { type: mimeType });
  
  // 如果是浏览器环境，使用浏览器下载
  if (!window.Android) {
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = fileName;
    link.click();
    URL.revokeObjectURL(link.href);
  } 
  // 如果是Android WebView环境，使用Base64编码并通过接口传递
  else {
    const reader = new FileReader();
    reader.onload = function() {
      const base64Data = reader.result.split(',')[1];
      window.Android.saveFile(fileName, base64Data);
    };
    reader.readAsDataURL(blob);
  }
}

4. 在Vue组件中使用

在Vue组件中调用导出方法：

import { exportFile } from '@/utils/file-export';

export default {
  methods: {
    exportData() {
      const data = '要导出的内容';
      const fileName = 'example.xls';
      exportFile(fileName, data);
    }
  }
}

5. 权限配置

在AndroidManifest.xml中添加必要的权限：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

对于Android 6.0及以上版本，还需要在运行时请求存储权限。