在Android APK中使用WebView加载Vue项目并实现文件导出
在Android APK中使用WebView加载Vue项目并实现文件导出
需要完成以下几个步骤：
1. 基本WebView集成
首先，在Android应用中设置WebView来加载你的Vue项目：
// MainActivity.java
public class MainActivity extends AppCompatActivity {private WebView webView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);webView = findViewById(R.id.webview);WebSettings webSettings = webView.getSettings();// 启用JavaScriptwebSettings.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;}@JavascriptInterfacepublic 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及以上版本，还需要在运行时请求存储权限。